import React, { useEffect } from 'react'
import PropTypes from 'prop-types'
import * as yup from 'yup'
import { useForm } from 'react-hook-form'
import { yupResolver } from '@hookform/resolvers/yup'
// FPCC
import Form from 'components/Form'

const validator = yup.object({
  widgetName: yup.string().min(5).required('A unique name is required'),
  widgetType: yup.string().required().oneOf(['WIDGET_GALLERY']),
  widgetFormat: yup.string().required().oneOf(['default']),
  galleryId: yup
    .string()
    .matches(/^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i)
    .required('A gallery id is required'),
})

function WidgetFormGallery({ cancelHandler, dataToEdit, submitHandler }) {
  const isCreateMode = !dataToEdit?.widgetUid
  const {
    register,
    handleSubmit,
    reset,
    setValue,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(validator),
    defaultValues: {
      widgetName: '',
      widgetType: 'WIDGET_GALLERY',
      widgetFormat: 'default',
      galleryId: '',
    },
  })

  useEffect(() => {
    if (!isCreateMode) {
      for (const property in dataToEdit) {
        if (Object.prototype.hasOwnProperty.call(dataToEdit, property)) {
          setValue(property, dataToEdit[property])
        }
      }
    }
  }, [])

  return (
    <div>
      <form id="WidgetFormGallery" onReset={reset}>
        <div className="p-6">
          <Form.Header
            title={isCreateMode ? 'Create a new widget' : 'Edit your widget'}
            subtitle={isCreateMode ? '2. Enter the details for your new Gallery widget.' : ''}
          />
          <div className="mt-6 grid grid-cols-12 gap-6">
            <div className="hidden">
              <input id="widgetType" name="widgetType" type="hidden" value="WIDGET_GALLERY" {...register('widgetType')} />
            </div>
            <div className="hidden">
              <input id="widgetFormat" name="widgetFormat" type="hidden" value="default" {...register('widgetFormat')} />
            </div>
            <div className="col-span-12 sm:col-span-6">
              <Form.TextField
                label={isCreateMode ? 'A nickname for your widget' : 'Nickname'}
                nameId="widgetName"
                register={register}
                helpText={isCreateMode ? 'This nickname will not appear on your site and cannot be changed.' : ''}
                disabled={!isCreateMode}
              />
              {errors?.widgetName && <div className="text-red-500">{errors?.widgetName?.message}</div>}
            </div>
            <div className="col-span-12">
              <Form.TextField
                label="Gallery Id"
                nameId="galleryId"
                helpText="Enter the uid for the gallery e.g. f0083daa-2988-4144-be17-34cd8fb288c9."
                register={register}
              />
              {errors?.galleryId && <div className="text-red-500">{errors?.galleryId?.message}</div>}
            </div>
          </div>
          <div className="mt-4 flex justify-end px-6">
            <Form.SubmitButtons
              submitLabel={isCreateMode ? 'Create Widget' : 'Save Changes'}
              submitIcon={isCreateMode ? 'Add' : 'Save'}
              cancelIcon={isCreateMode ? 'BackArrow' : 'Close'}
              cancelLabel={isCreateMode ? 'Go Back' : 'Cancel'}
              onCancelClick={cancelHandler}
              onSubmitClick={handleSubmit(submitHandler)}
            />
          </div>
        </div>
      </form>
    </div>
  )
}
// PROPTYPES
const { func, object } = PropTypes
WidgetFormGallery.propTypes = {
  cancelHandler: func,
  dataToEdit: object,
  submitHandler: func,
}

export default WidgetFormGallery
