import { useEffect, useState, type FC } from 'react'
import Button from '@/components/Button'
import { Edit, TickCircle } from 'iconsax-react'
import DefaulModal from '@/components/DefaulModal'
import { useFormik } from 'formik'
import type { CreateFieldValueType } from '../types/Types'
import * as Yup from 'yup'
import Input from '@/components/Input'
import { useGetFieldValueDetail, useUpdateFieldValue } from '../hooks/useFormBuilderData'
import { extractErrorMessage } from '@/config/func'
import { toast } from 'react-toastify'

type Props = {
    id: string,
    refetch: () => void,
}

const UpdateValue: FC<Props> = ({ id, refetch }) => {


    const [showModal, setShowModal] = useState<boolean>(false)
    const { mutate: updateValue } = useUpdateFieldValue()
    const { data, refetch: refetchDeetail } = useGetFieldValueDetail(id, showModal)

    const formik = useFormik<CreateFieldValueType>({
        initialValues: {
            value: '',
            order: 1
        },
        validationSchema: Yup.object({
            value: Yup.string().required('این فیلد اجباری است')
        }),
        onSubmit: (values) => {
            updateValue({ id: id, params: values }, {
                onSuccess: () => {
                    refetch()
                    refetchDeetail()
                    setShowModal(false)
                },
                onError: (error) => {
                    toast.error(extractErrorMessage(error))
                }

            })
        }
    })

    useEffect(() => {

        if (data) {
            formik.setValues({
                value: data?.data.value,
                order: data?.data.order
            })
        }

        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [data])


    return (
        <div>
            <Edit
                onClick={() => setShowModal(true)}
                size={20}
                color='#0037FF'
            />

            <DefaulModal
                open={showModal}
                close={() => setShowModal(false)}
                isHeader
                title_header='ویرایش مقدار'
            >
                <div className='mt-5'>
                    <Input
                        label='مقدار'
                        {...formik.getFieldProps('value')}
                        error_text={formik.touched.value && formik.errors.value ? formik.errors.value : ''}
                    />
                </div>

                <div className='mt-5'>
                    <Input
                        label='ترتیب اولویت'
                        {...formik.getFieldProps('order')}
                    />
                </div>

                <div className='mt-6 flex justify-end'>
                    <Button
                        className='w-fit px-6'
                        onClick={() => formik.handleSubmit()}
                    >
                        <div className='flex gap-2 items-center'>
                            <TickCircle
                                size={18}
                                color='black'
                            />
                            <div>ذخیره</div>
                        </div>
                    </Button>
                </div>

            </DefaulModal>
        </div>
    )
}

export default UpdateValue