import { DatePicker } from 'antd'
import { ErrorMessage, Form, Formik } from 'formik'
import moment from 'moment'
import React, { useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import { useLocation } from 'react-router-dom'
import * as Yup from 'yup'
import FormikControl from '../../../../components/FormikControl'
import Loader from '../../../../components/Loader'
import ModelComponent from '../../../../components/Modal'
import ReactSelect from '../../../../components/ReactSelect'
import TextError from '../../../../components/TextError'
import { getCurrentTime, showToast } from '../../../../lib/AllGlobalFunction'
import { _status_ } from '../../../../lib/AllStaticVariables'
import axiosProvider from '../../../../lib/AxiosProvider'
import { _collectionImg_ } from '../../../../lib/ImagePath'
import { _integerRegex_ } from '../../../../lib/Regex'
import { _exception } from '../../../../lib/exceptionMessage'

const FlashSaleForm = ({
  modalShow,
  setModalShow,
  initialValues,
  loading,
  setLoading,
  fetchData,
  toast,
  setToast
}) => {
  const SUPPORTED_FORMATS = ['image/jpg', 'image/jpeg', 'image/png']
  const { userId } = useSelector((state) => state?.user?.userInfo)
  const location = useLocation()
  const [dateTime, setDateTime] = useState({
    currentDateTime: '',
    currentHour: '',
    currentMinute: ''
  })

  const getAndSetTime = async () => {
    let date = await getCurrentTime()
    date = moment(date)
    setDateTime({
      currentDateTime: date,
      currentHour: date?.hour(),
      currentMinute: date?.minute()
    })
  }

  const validationSchema = Yup.object().shape(
    {
      name: Yup.string().required('Please enter Flash Sale Name'),
      title: Yup.string().required('Title Required'),
      description: Yup.string().required('Please enter Description'),
      subTitle: Yup.string().required('Sub Title Required'),
      startDate: Yup.string().required('Start Date Required'),
      endDate: Yup.string().required('End Date Required'),
      sequence: Yup.string().required('Please enter Sequence Number'),
      status: Yup.string()
        .test(
          'nonull',
          'Please select the status',
          (value) => value !== 'undefined'
        )
        .required('Please select the status'),

      image: Yup.mixed().when('image', {
        is: (value) => value?.name,
        then: (schema) =>
          schema
            .test(
              'fileFormat',
              'File formate is not supported, Please use .jpg/.png/.jpeg format support',
              (value) => value && SUPPORTED_FORMATS.includes(value.type)
            )
            .test('fileSize', 'File must be less than 2MB', (value) => {
              return value !== undefined && value && value.size <= 2000000
            }),
        otherwise: (schema) => schema.nullable()
      })
    },
    ['image', 'image']
  )

  const disabledDate = (current) => {
    return (
      current &&
      current <
        (dateTime &&
          dateTime?.currentDateTime &&
          dateTime?.currentDateTime?.startOf('day'))
    )
  }

  const disabledEndDate = (current, startValue) => {
    const today = moment()?.startOf('day')

    if (current?.isBefore(today)) {
      return true
    }

    if (startValue && current?.isBefore(startValue?.startOf('day'))) {
      return true
    }

    return false
  }

  const disabledTime = (current) => {
    if (!current) {
      return {
        disabledHours: () => [],
        disabledMinutes: () => [],
        disabledSeconds: () => []
      }
    }
    const hoursCount = dateTime?.currentDateTime?._i
      ?.split('T')?.[1]
      ?.substring(0, 2)

    const minutesCount = dateTime?.currentDateTime?._i
      ?.split('T')?.[1]
      ?.substring(3, 5)

    const hours = []
    for (let index = 0; index < hoursCount; index++) {
      hours?.push(index)
    }
    const minutes = []
    for (let index = 0; index < minutesCount; index++) {
      minutes?.push(index)
    }

    if (current?.isSame(dateTime?.currentDateTime, 'day')) {
      return {
        // disabledHours: () => [...Array(dateTime?.currentHour).keys()],
        disabledHours: () => hours,
        // disabledMinutes: (hour) =>
        //   hour === dateTime?.currentHour
        //     ? [...Array(dateTime?.currentMinute).keys()]
        //     : [],
        disabledMinutes: () => minutes,
        disabledSeconds: () => []
      }
    }

    return {
      disabledHours: () => [],
      disabledMinutes: () => [],
      disabledSeconds: () => []
    }
  }

  const onSubmit = async (values, resetForm) => {
    let dataofForm = {
      Name: values.name,
      Type: 'Flashsale',
      Image: values?.image?.name ? values?.image?.name : '',
      ImageFile: values?.image ? values?.image : '',
      Title: values?.title,
      Description: values.description,
      SubTitle: values?.subTitle,
      StartDate: values?.startDate?.format('YYYY-MM-DD HH:mm:ss'),
      EndDate: values?.endDate?.format('YYYY-MM-DD HH:mm:ss'),
      Sequence: values?.sequence,
      Status: values.status
    }

    if (values?.id) {
      dataofForm = { ...dataofForm, Id: values?.id }
    }

    const submitFormData = new FormData()

    const keys = Object.keys(dataofForm)

    keys.forEach((key) => {
      submitFormData.append(key, dataofForm[key])
    })
    setLoading(true)
    try {
      const response = await axiosProvider({
        method: values?.id ? 'PUT' : 'POST',
        endpoint: `ManageCollection`,
        data: submitFormData,
        logData: values,
        oldData: initialValues,
        location: location?.pathname,
        userId
      })

      setLoading(false)
      if (response?.status === 200) {
        resetForm({ values: '' })
        fetchData()
        setModalShow(false)
        showToast(toast, setToast, response)
      }
    } catch (error) {
      setLoading(false)
      showToast(toast, setToast, {
        data: {
          message: _exception?.message,
          code: 204
        }
      })
    }
  }

  useEffect(() => {
    getAndSetTime()
  }, [])

  return (
    <Formik
      enableReinitialize
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={onSubmit}
    >
      {({
        values,
        setFieldValue,
        setErrors,
        setTouched,
        resetForm,
        errors
      }) => (
        <Form id='mainBrand'>
          <ModelComponent
            show={modalShow}
            modalsize={'md'}
            className='fade-modal-for-date modal-backdrop'
            modeltitle={
              !initialValues?.id
                ? 'Add Flash Sale Collection'
                : 'Update Flash Sale Collection'
            }
            onHide={() => {
              setModalShow(false)
              resetForm({ values: '' })
            }}
            backdrop={'static'}
            formbuttonid={'mainBrand'}
            submitname={!initialValues?.id ? 'Create' : 'Update'}
            validationSchema={validationSchema}
            onSubmit={onSubmit}
            formik={{ values, setFieldValue, setErrors, setTouched, resetForm }}
          >
            {loading && <Loader />}
            <div className='row'>
              <div className='col-md-3'>
                <div className='input-file-wrapper m--cst-filetype'>
                  <label className='form-label d-block' htmlFor='logo'>
                    Image
                  </label>
                  <input
                    id='image'
                    className='form-control'
                    name='image'
                    type='file'
                    accept='image/jpg, image/png, image/jpeg'
                    onChange={(event) => {
                      const objectUrl = URL.createObjectURL(
                        event.target.files[0]
                      )
                      if (event.target.files[0].type !== '') {
                        setFieldValue('logoUrl', objectUrl)
                      }
                      setFieldValue(
                        'image',
                        event?.target?.files[0] ? event?.target?.files[0] : ''
                      )
                    }}
                    hidden
                  />
                  {values?.image ? (
                    <div
                      style={{ width: '100%' }}
                      className='position-relative m--img-preview d-flex rounded-2 overflow-hidden align-items-center'
                    >
                      <img
                        src={
                          values?.logoUrl?.includes('blob')
                            ? values?.logoUrl
                            : `${process.env.REACT_APP_IMG_URL}${_collectionImg_}${values?.image}`
                        }
                        alt='Preview Collection'
                        title={values?.image ? values?.image?.name : ''}
                        className='rounded-2'
                      ></img>
                      <span
                        onClick={(e) => {
                          setFieldValue('logoUrl', null)
                          setFieldValue('image', '')
                          document.getElementById('image').value = null
                        }}
                      >
                        <i className='m-icon m-icon--close'></i>
                      </span>
                    </div>
                  ) : (
                    <>
                      <label
                        style={{ width: '100%' }}
                        className='m__image_default d-flex align-items-center justify-content-center rounded-2'
                        htmlFor='image'
                      >
                        <i className='m-icon m-icon--defaultpreview'></i>
                      </label>
                    </>
                  )}
                  <ErrorMessage
                    name='image'
                    component={TextError}
                    customclass={'cfz-12 lh-sm'}
                  />
                </div>
              </div>
              <div className='col-md-9'>
                <div className='row'>
                  <div className='col-md-12'>
                    <FormikControl
                      control='input'
                      label='Flash Sale Name'
                      isRequired
                      type='text'
                      onBlur={(e) => {
                        let fieldName = e?.target?.name
                        setFieldValue(fieldName, values[fieldName]?.trim())
                      }}
                      name='name'
                      placeholder='Flash Sale Name'
                    />
                  </div>
                  <div className='col-md-12'>
                    <FormikControl
                      control='input'
                      label='Title'
                      isRequired
                      type='text'
                      onBlur={(e) => {
                        let fieldName = e?.target?.name
                        setFieldValue(fieldName, values[fieldName]?.trim())
                      }}
                      name='title'
                      placeholder='Title'
                    />
                  </div>
                </div>
              </div>
            </div>
            <div className='row'>
              <div className='col-md-12'>
                <FormikControl
                  as='textarea'
                  control='input'
                  label='Description'
                  type='text'
                  onBlur={(e) => {
                    let fieldName = e?.target?.name
                    setFieldValue(fieldName, values[fieldName]?.trim())
                  }}
                  name='description'
                  isRequired
                  placeholder='Description'
                />
              </div>
            </div>
            <div className='row'>
              <div className='col-md-12'>
                <FormikControl
                  control='input'
                  label='Sub Title'
                  type='text'
                  onBlur={(e) => {
                    let fieldName = e?.target?.name
                    setFieldValue(fieldName, values[fieldName]?.trim())
                  }}
                  name='subTitle'
                  isRequired
                  placeholder='Sub Title'
                />
              </div>
            </div>
            <div className='row'>
              <div className='col-md-6'>
                <div className='input-select-wrapper mb-3'>
                  <label className='form-label required'>Start date</label>
                  <DatePicker
                    id='startDate'
                    name='startDate'
                    className='pv-datepicker '
                    disabled={values?.isStartDateDisabled}
                    inputReadOnly
                    format='DD-MM-YYYY HH:mm:ss'
                    placeholder='Start date'
                    showTime={{ format: 'HH:mm:ss' }}
                    onChange={(date) => {
                      setFieldValue('startDate', date)
                      setFieldValue('endDate', '')
                    }}
                    disabledDate={disabledDate}
                    disabledTime={disabledTime}
                    value={values?.startDate}
                    defaultValue={dateTime?.currentDateTime}
                    onNow={dateTime?.currentDateTime}
                  />
                  {!values?.startDate && errors?.startDate && (
                    <div className='text-danger'>{errors?.startDate}</div>
                  )}
                </div>
              </div>
              <div className='col-md-6'>
                <div className='input-select-wrapper mb-3'>
                  <label className='form-label required'>End date</label>
                  <DatePicker
                    id='endDate'
                    name='endDate'
                    className='pv-datepicker'
                    showNow={false}
                    disabled={
                      !values?.startDate ? true : values?.isEndDateDisabled
                    }
                    inputReadOnly
                    format='DD-MM-YYYY HH:mm:ss'
                    showTime={{
                      format: 'HH:mm:ss',
                      disabledTime: () => values?.startDate
                    }}
                    onChange={(date) => {
                      setFieldValue('endDate', date)
                    }}
                    disabledDate={(current) =>
                      disabledEndDate(current, values?.startDate)
                    }
                    disabledTime={(current) => {
                      if (!current) {
                        return {}
                      }
                      if (current && current.isSame(values?.startDate, 'day')) {
                        return {
                          disabledHours: () => [
                            ...Array(values?.startDate.hour()).keys()
                          ],

                          disabledMinutes: (hour) =>
                            hour === values?.startDate.hour()
                              ? [
                                  ...Array(
                                    values?.startDate.minute() + 1
                                  ).keys()
                                ]
                              : [],
                          disabledSeconds: () => []
                        }
                      }
                      return {}
                    }}
                    value={values?.endDate}
                    defaultValue={dateTime?.currentDateTime}
                  />
                  {!values?.endDate && errors?.endDate && (
                    <div className='text-danger'>{errors?.endDate}</div>
                  )}
                </div>
              </div>
            </div>
            <div className='row'>
              <div className='col-md-6'>
                <FormikControl
                  isRequired
                  control='input'
                  label='Sequence'
                  type='text'
                  maxLength={5}
                  name='sequence'
                  onChange={(e) => {
                    const inputValue = e?.target?.value
                    const isValid = _integerRegex_.test(inputValue)
                    const fieldName = e?.target?.name
                    if (isValid || !inputValue)
                      setFieldValue([fieldName], inputValue)
                  }}
                  onBlur={(e) => {
                    let fieldName = e?.target?.name
                    setFieldValue(fieldName, values[fieldName]?.trim())
                  }}
                  placeholder='Sequence'
                />
              </div>
              <div className='col-md-6'>
                <div className='input-select-wrapper mb-3'>
                  <label className='form-label required'>Select Status</label>
                  <ReactSelect
                    id='status'
                    name='status'
                    value={
                      values?.status && {
                        value: values?.status,
                        label: values?.status
                      }
                    }
                    options={_status_}
                    onChange={(e) => {
                      if (e) {
                        setFieldValue('status', e?.value)
                      }
                    }}
                  />
                </div>
              </div>
            </div>
          </ModelComponent>
        </Form>
      )}
    </Formik>
  )
}

export default FlashSaleForm