import { FC, useEffect, useState } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import Button from '../../components/Button'
import Input from '../../components/Input'
import Textarea from '../../components/Textarea'
import Switch from '../../components/Switch'
import { TickCircle } from 'iconsax-react'
import { useGetGuideDetail, useUpdateGuide } from './hooks/useGuideData'
import { toast } from '../../components/Toast';
import { ErrorType } from '../../helpers/types'
import { Pages } from '../../config/Pages'

type GuideFormValues = {
    title: string;
    description: string;
    content: string;
    order: number | string;
}

const Update: FC = () => {
    const { t } = useTranslation('global')
    const { id, guideId } = useParams()
    const navigate = useNavigate()
    const [isActive, setIsActive] = useState<boolean>(true)

    const getDetail = useGetGuideDetail(guideId || '')
    const updateGuide = useUpdateGuide(id || '')

    const formik = useFormik<GuideFormValues>({
        initialValues: {
            title: '',
            description: '',
            content: '',
            order: 1,
        },
        validationSchema: Yup.object({
            title: Yup.string().required(t('errors.required')),
            description: Yup.string().required(t('errors.required')),
            content: Yup.string().required(t('errors.required')),
            order: Yup.number().required(t('errors.required')),
        }),
        onSubmit: (values) => {
            if (!guideId) return
            updateGuide.mutate({
                id: guideId,
                params: {
                    ...values,
                    order: Number(values.order),
                    isActive,
                }
            }, {
                onSuccess: () => {
                    toast(t('success'), 'success')
                    navigate(Pages.services.guide + id)
                },
                onError: (error: ErrorType) => {
                    toast(error.response?.data?.error?.message?.[0] || t('error'))
                }
            })
        }
    })

    useEffect(() => {
        if (getDetail.data?.data?.guide) {
            const g = getDetail.data?.data?.guide
            formik.setValues({
                title: g.title,
                description: g.description,
                content: g.content,
                order: g.order,
            })
            setIsActive(Boolean(g.isActive))
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [getDetail.data])

    return (
        <div className='w-full mt-4'>
            <div className='flex w-full justify-between items-center'>
                <div>
                    {t('edit')}
                </div>
                <div>
                    <Button
                        className='px-5'
                        onClick={() => formik.handleSubmit()}
                        isLoading={updateGuide.isPending}
                    >
                        <div className='flex gap-2'>
                            <TickCircle
                                className='size-5'
                                color='#fff'
                            />
                            <div>{t('submit')}</div>
                        </div>
                    </Button>
                </div>
            </div>

            <div className='grid grid-cols-1 xl:grid-cols-3 gap-6'>
                <div className='xl:col-span-2'>
                    <div className='mt-10 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
                        <Input
                            label={t('title')}
                            name='title'
                            value={formik.values.title}
                            onChange={formik.handleChange}
                            error_text={formik.touched.title && formik.errors.title ? String(formik.errors.title) : ''}
                        />

                        <div className='mt-5'>
                            <Textarea
                                label={t('description')}
                                name='description'
                                value={formik.values.description}
                                onChange={formik.handleChange}
                                error_text={formik.touched.description && formik.errors.description ? String(formik.errors.description) : ''}
                            />
                        </div>

                        <div className='mt-5'>
                            <Textarea
                                label={t('guide.content')}
                                name='content'
                                value={formik.values.content}
                                onChange={formik.handleChange}
                                error_text={formik.touched.content && formik.errors.content ? String(formik.errors.content) : ''}
                            />
                        </div>
                    </div>
                </div>

                <div className='bg-white mt-10 w-full text-xs h-fit px-5 py-7 rounded-3xl'>
                    <div>
                        <Switch
                            active={isActive}
                            onChange={(v) => setIsActive(v)}
                            label={t('status')}
                        />
                    </div>
                    <div className='mt-5'>
                        <Input
                            label={t('guide.order')}
                            name='order'
                            type='number'
                            value={formik.values.order}
                            onChange={formik.handleChange}
                            error_text={formik.touched.order && formik.errors.order ? String(formik.errors.order) : ''}
                        />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Update


