import { Button, Col, Radio, RadioChangeEvent, Row } from 'antd'
import React from 'react'
import { Icon } from 'components/Icon'
import { Paragraph } from 'components/Typography'

import { AntInput, AntInputNumber, FieldType } from 'components/Form/FormItem'
import { Field, Form, Formik } from 'formik'
import { YoutubeItem } from 'models/talent/talent-profile-module.model'
import { ModalStep } from 'redux/Shopify/types'
import { addingHttpsPrefix } from 'utils/string'
import { isYoutubeUrlPlaylist, validateCollectionYoutube } from 'utils/validate'

export interface IProps {
  item?: YoutubeItem
  loading?: boolean
  cancellable?: boolean
  close?: () => void
  back?: () => void
  callback: (values: any, action?: any) => void
}
const options = [
  { label: 'Newest', value: 'newest' },
  { label: 'Oldest', value: 'oldest' }
]

const collectionYoutube = ({
  item,
  back,
  callback,
  close,
  loading = false,
  cancellable
}: IProps): ModalStep => {
  let action: any
  let caption: any

  const initValues = {
    url: item?.url || '',
    totalSelected: item?.totalSelected || 3,
    sort: item?.sort || 'newest'
  }

  if (!!item || cancellable) {
    caption = 'CANCEL'
    action = close
  } else {
    caption = 'PREVIOUS'
    action = back
  }

  return {
    title: item ? 'Edit YouTube Content' : 'Add YouTube Content',
    content: (
      <>
        <Paragraph preset="semibold18">Video Collection</Paragraph>
        <Paragraph
          className="opacity--08 m__t--4 leading-22 m__b--24"
          preset="regular16"
        >
          Please enter a link to a YouTube Channel or Playlist and the number of
          videos to display.
        </Paragraph>

        <Formik
          enableReinitialize
          initialValues={initValues}
          onSubmit={callback}
        >
          {({
            handleSubmit,
            handleReset,
            values,
            setFieldValue,
            errors,
            touched
          }) => (
            <Form onSubmit={handleSubmit}>
              <Field
                component={AntInput}
                name="url"
                type={FieldType.input}
                label="URL"
                placeholder="https://youtube.com"
                beforeSetValue={addingHttpsPrefix}
                validate={validateCollectionYoutube}
                className={errors.url && touched.url && 'm'}
              />
              <Field
                component={AntInputNumber}
                name="totalSelected"
                label="Number of videos"
                min={1}
                max={50}
                className={values.totalSelected === 50 && 'number-of-video'}
                isInt
                controls={false}
                addonBefore={
                  <Button
                    disabled={values.totalSelected <= 1}
                    onClick={() => {
                      setFieldValue('totalSelected', values.totalSelected - 1)
                    }}
                    className="p--0"
                    type="text"
                  >
                    <div className="height--24">
                      <Icon
                        fill={values.totalSelected > 1 ? '#636363' : '#C4C4C4'}
                        name="input-minus"
                      />
                    </div>
                  </Button>
                }
                addonAfter={
                  <Button
                    onClick={() => {
                      setFieldValue('totalSelected', values.totalSelected + 1)
                    }}
                    className="p--0"
                    type="text"
                    disabled={values.totalSelected >= 50}
                  >
                    <div className="height--24">
                      <Icon
                        fill={
                          !values.totalSelected || values.totalSelected < 50
                            ? '#636363'
                            : '#C4C4C4'
                        }
                        name="input-plus"
                      />
                    </div>
                  </Button>
                }
              />
              {values.totalSelected === 50 && (
                <Paragraph className="m__t--4 m__b--24">
                  Maximum number of videos reached
                </Paragraph>
              )}
              <Paragraph className="text--grey4">
                Sort by date added (playlist only)
              </Paragraph>
              <Radio.Group
                className="m__t--8"
                value={values.sort}
                options={options}
                onChange={({ target: { value } }: RadioChangeEvent) => {
                  setFieldValue('sort', value)
                }}
                disabled={!isYoutubeUrlPlaylist(values.url)}
              />

              <Row
                className="m__y--24"
                gutter={16}
                justify="end"
                align="middle"
              >
                <Col>
                  <Button
                    className="height--52 width--160 text__transform--uppercase letter__spacing--1"
                    type="default"
                    block
                    onClick={() => {
                      action()
                      handleReset()
                    }}
                    size="large"
                  >
                    {caption}
                  </Button>
                </Col>
                <Col>
                  <Button
                    className="height--52 width--160 text__transform--uppercase letter__spacing--1"
                    type="primary"
                    block
                    size="large"
                    htmlType="submit"
                    loading={loading}
                  >
                    {!item ? 'DONE' : 'SAVE'}
                  </Button>
                </Col>
              </Row>
            </Form>
          )}
        </Formik>
      </>
    ),
    footer: null
  }
}

export default collectionYoutube
