import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '../../components/Input'
import Textarea from '../../components/Textarea'
import UploadBox from '../../components/UploadBox'
import Button from '../../components/Button'
import { TickCircle, TickSquare } from 'iconsax-react'
import { useMultiUpload } from '../ticket/hooks/useTicketData'
import { useFormik } from 'formik'
import { CreateCriticismsTypes } from './types/CriticismsTypes'
import * as Yup from 'yup'
import { toast } from 'react-toastify'
import { ErrorType } from '../../helpers/types'
import { useCreateCriticisms } from './hooks/useCriticismsData'
import { Helmet } from 'react-helmet-async'

const AddCriticisms: FC = () => {

    const { t } = useTranslation('global')
    const [files, setFiles] = useState<File[]>([])
    const multiUpload = useMultiUpload()
    const createCriticisms = useCreateCriticisms()

    const formik = useFormik<CreateCriticismsTypes>({
        initialValues: {
            content: '',
            files: [],
            title: '',
        },
        validationSchema: Yup.object({
            title: Yup.string().required(t('errors.required')),
            content: Yup.string().required(t('errors.required')),
        }),
        onSubmit: async (values) => {
            if (files.length > 0) {
                const images = new FormData()
                files.forEach(file => {
                    images.append('files', file)
                })
                await multiUpload.mutateAsync(images, {
                    onSuccess: async (data) => {
                        values.files = await data.data.map((item: { url: string }) => item?.url)
                    },
                    onError: (error: ErrorType) => {
                        toast.error(error.response?.data?.error?.message[0])
                    }
                })

            } else {
                delete values.files
            }

            createCriticisms.mutate(values, {
                onSuccess: () => {
                    toast.success(t('success'))
                    formik.resetForm()
                    setTimeout(() => {
                        window.location.reload()
                    }, 1000);
                },
                onError: (error: ErrorType) => {
                    toast.error(error.response?.data?.error?.message[0])
                }
            })
        }
    })

    return (
        <div className='mt-4 text-sm'>
            <Helmet>
                <title>
                    داناک | انتقادات
                </title>
            </Helmet>
            <div>
                {t('criticisms.criticisms')}
            </div>

            <div className='flex gap-6 xl:mt-8 mt-5'>
                <div className='flex-1 bg-white py-8 xl:px-10 px-5 rounded-3xl'>
                    <div>
                        {t('criticisms.submit_your_criticisms')}
                    </div>

                    <div className='mt-3 text-xs text-description'>
                        {t('criticisms.description_criticisms')}
                    </div>

                    <div className='mt-10'>
                        <Input
                            label={t('criticisms.subject')}
                            placeholder={t('criticisms.enter_your_subject')}
                            {...formik.getFieldProps('title')}
                            error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
                        />
                    </div>

                    <div className='mt-7'>
                        <Textarea
                            label={t('criticisms.description')}
                            placeholder={t('criticisms.enter_description')}
                            {...formik.getFieldProps('content')}
                            error_text={formik.touched.content && formik.errors.content ? formik.errors.content : ''}
                        />
                    </div>

                    <div className='mt-7'>
                        <UploadBox
                            label={t('attachment')}
                            isMultiple
                            onChange={setFiles}
                        />
                    </div>


                    <div className='mt-20 flex justify-end'>
                        <Button
                            className='xl:max-w-[100px]'
                            onClick={() => formik.handleSubmit()}
                            isLoading={createCriticisms.isPending || multiUpload.isPending}
                        >
                            <div className='flex gap-2 items-center'>
                                <TickCircle size={20} color='white' />
                                <div>
                                    {t('ticket.send')}
                                </div>
                            </div>
                        </Button>
                    </div>
                </div>

                <div className='bg-white w-sidebar hidden xl:block py-10 px-5 h-fit rounded-3xl'>
                    <div className='text-sm'>
                        انتقادات و پیشنهادهای شما برای ما راه گشاست:
                    </div>

                    <div className='mt-6'>
                        <div className='flex items-start gap-2 border-b pb-5'>
                            <div>
                                <TickSquare size={20} color='black' variant='Bold' />
                            </div>
                            <div className='text-description text-xs leading-5'>
                                در صورتیکه از دپارتمان خاصی انتقادی دارید لطفا در متن توضیحات مشخص نمایید تا ما راحت تر بتوانیم نقد شما را بررسی کنیم.
                            </div>
                        </div>
                        <div className='flex items-start gap-2 mt-6 border-b pb-5'>
                            <div>
                                <TickSquare size={20} color='black' variant='Bold' />
                            </div>
                            <div className='text-description text-xs leading-5'>
                                نظرات ارزشمند شما به ما کمک میکند تا بهتر بتوانید خدمات و محصولاتمان را مطابق خواسته و نیاز شما تنظیم کنیم ، از این رو خواهشمندیم نظرات و نقد های ارزشمند خود را برای ما ارسال نمایید.
                            </div>
                        </div>
                        <div className='flex items-start gap-2 mt-6'>
                            <div>
                                <TickSquare size={20} color='black' variant='Bold' />
                            </div>
                            <div className='text-description text-xs leading-5'>
                                تمامی نظرات توسط داناک بررسی و پردازش شده و در صورت نیاز شما را در جریان پردازش اطلاعات قرار خواهیم داد، ممکن است همکاران ما در واحد تجربه مشتری با شما تماس گرفته و جزییات بیشتری را پیرامون نقد و نظر شما جویا شوند.
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    )
}

export default AddCriticisms