import {
  Button,
  Dialog,
  FormContainer,
  FormItem,
  Input,
  Notification,
  toast,
} from '@/components/ui'
import { postMyNotificationByNotificationRuleId } from '@/services/notification.service'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { Field, Form, Formik, FormikHelpers } from 'formik'
import { useState } from 'react'
import * as Yup from 'yup'

export interface NotificationDto {
  id: string
  message: string
}

const scheme = Yup.object().shape({
  id: Yup.string().required(),
  message: Yup.string().required(),
})

function CreateNotification({
  open,
  onDialogClose,
  id,
}: {
  open: boolean
  onDialogClose: () => void
  id: string
}) {
  const { translate } = useLocalization()
  const [loading, setLoading] = useState(true)

  const handleSubmit = async (
    values: NotificationDto,
    { setSubmitting }: FormikHelpers<NotificationDto>,
  ) => {
    if (!id) {
      return
    }

    setLoading(true)
    setSubmitting(true)

    try {
      await postMyNotificationByNotificationRuleId({ id, message: values.message })
      toast.push(
        <Notification type="success" duration={2000}>
          {translate('::Kaydet')}
        </Notification>,
        {
          placement: 'top-end',
        },
      )
      onDialogClose()
    } catch (error) {
      toast.push(
        <Notification type="danger" duration={2000}>
          {'Hata'}
        </Notification>,
        {
          placement: 'top-end',
        },
      )
    } finally {
      setLoading(false)
      setSubmitting(false)
    }
  }

  return (
    <Dialog isOpen={open} onClose={onDialogClose} onRequestClose={onDialogClose}>
      <h5 className="mb-4">{id}</h5>
      <Formik initialValues={{ id, message: '' }} validationSchema={scheme} onSubmit={handleSubmit}>
        {({ touched, errors, values, isSubmitting }) => {
          return (
            <Form>
              <FormContainer size="sm">
                <FormItem
                  label="Message"
                  invalid={errors.message && touched.message}
                  errorMessage={errors.message}
                >
                  <Field
                    textArea="true"
                    type="text"
                    autoComplete="off"
                    name="message"
                    component={Input}
                  />
                </FormItem>

                <div className="mt-6 flex flex-row justify-end gap-3">
                  <Button variant="solid" loading={isSubmitting} type="submit">
                    {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
                  </Button>
                  <Button type="button" variant="plain" onClick={onDialogClose}>
                    {translate('::Cancel')}
                  </Button>
                </div>
              </FormContainer>
            </Form>
          )
        }}
      </Formik>
    </Dialog>
  )
}

export default CreateNotification