import { Alert, Button, Col, Row } from 'antd'
import classNames from 'classnames'
import { AntInput, FieldType } from 'components/Form/FormItem'
import { Icon } from 'components/Icon'
import { Paragraph } from 'components/Typography'
import { Field, Form, Formik } from 'formik'
import { YoutubeItem } from 'models/talent/talent-profile-module.model'
import * as React from 'react'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { addingHttpsPrefix } from 'utils/string'
import { validateIndividualYoutube } from 'utils/validate'

interface YoutubeVideoProps {
  item?: YoutubeItem
  loading?: boolean
  cancellable?: boolean
  show?: boolean
  close?: () => void
  back?: () => void
  callback: (values: any, action?: any) => void
}

const YoutubeVideo = ({
  item,
  back,
  callback,
  close,
  loading = false,
  cancellable,
  show
}: YoutubeVideoProps) => {
  const [showAlert, setShowAlert] = useState(true)
  const [initValues, setInitValues] = useState({
    url: item?.url || ''
  })
  useEffect(() => {
    if (show) {
      setShowAlert(true)
      setInitValues({
        url: item?.url || ''
      })
    }
  }, [item, show])

  const caption = useMemo(() => {
    return !!item || cancellable ? 'CANCEL' : 'PREVIOUS'
  }, [item, cancellable])
  const action = useCallback(() => {
    if (!!item || cancellable) {
      close?.()
      return
    }
    back?.()
  }, [item, close, back, cancellable])

  return (
    <>
      <Paragraph preset="semibold18">Individual Video</Paragraph>
      <Paragraph
        className="opacity--08 m__t--4 leading-22 m__b--24"
        preset="regular16"
      >
        Please enter a link to a YouTube video.
      </Paragraph>
      {showAlert && (
        <Alert
          message={undefined}
          className={classNames('m__b--24 p__x--8 p__y--8 bg--darkGray')}
          description={
            'If the video is not yet public, it will be hidden on your profile until its visibility status on YouTube changes.'
          }
          icon={<Icon name="info" />}
          showIcon
          closeText={<Icon width={24} height={24} name="close-outline" />}
          onClose={() => setShowAlert(false)}
        />
      )}

      <Formik enableReinitialize initialValues={initValues} onSubmit={callback}>
        {({ handleSubmit, handleReset }) => (
          <Form onSubmit={handleSubmit}>
            <Field
              component={AntInput}
              name="url"
              type={FieldType.input}
              label="URL"
              placeholder="https://youtube.com"
              beforeSetValue={addingHttpsPrefix}
              validate={validateIndividualYoutube}
            />
            <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>
    </>
  )
}

export default YoutubeVideo
