import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '../../components/Input'
import Select from '../../components/Select'
import Textarea from '../../components/Textarea'
import UploadBox from '../../components/UploadBox'
import Button from '../../components/Button'
import { TickCircle, TickSquare } from 'iconsax-react'
import { useCreateTicket, useGetCategoriesTicket, useMultiUpload } from './hooks/useTicketData'
import { useGetProfile } from '../profile/hooks/useProfileData'
import PageLoading from '../../components/PageLoading'
import { useFormik } from 'formik'
import { CreateTicketType } from './types/TicketTypes'
import * as Yup from 'yup'
import { toast } from '../../components/Toast'
import { ErrorType } from '../../helpers/types'
import { useNavigate } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import { useGetMyServices } from '../service/hooks/useServiceData'
import { MyServicesItem } from '../service/types/ServiecTypes'
import { Helmet } from 'react-helmet-async'

const CreateTicket: FC = () => {

    const { t } = useTranslation('global')
    const navigate = useNavigate()
    const [files, setFiles] = useState<File[]>([])
    const [percent, setPercent] = useState<number>(0)
    const getProfile = useGetProfile()
    const getCategories = useGetCategoriesTicket()
    const multiUpload = useMultiUpload(setPercent)
    const createTicket = useCreateTicket()
    const getMyservice = useGetMyServices('')

    const formik = useFormik<CreateTicketType>({
        initialValues: {
            subject: '',
            message: '',
            categoryId: '',
            priority: 'LOW',
            danakServiceId: '',
            title: '',
            attachmentUrls: []
        },
        validationSchema: Yup.object({
            subject: Yup.string().required(t('errors.required')),
            message: Yup.string().required(t('errors.required')),
            categoryId: Yup.string().required(t('errors.required')),
            priority: 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.attachmentUrls = await data.data.map((item: { url: string }) => item?.url)
                    },
                    onError: (error: ErrorType) => {
                        toast(error.response?.data?.error?.message[0], 'error')
                    }
                })
            } else {
                delete values.attachmentUrls
            }

            if (values.danakServiceId === '') {
                delete values.danakServiceId
            }


            createTicket.mutate(values, {
                onSuccess: (data) => {
                    toast(t('success'), 'success')
                    formik.resetForm()
                    navigate(Pages.ticket.detail + data.data?.ticketId)
                },
                onError: (error: ErrorType) => {
                    toast(error.response?.data?.error?.message[0], 'error')
                }
            })
        }
    })


    return (
        <div className='mt-4 pb-12'>
            <Helmet>
                <title>
                    داناک | ایجاد تیکت
                </title>
            </Helmet>
            <div>
                {t('ticket.new_ticket')}
            </div>

            {
                getProfile.isPending || getCategories.isPending ?
                    <PageLoading />
                    :
                    <div className='flex gap-6 xl:mt-8 mt-4'>
                        <div className='flex-1 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
                            <div>
                                {t('ticket.submit_your_message')}
                            </div>

                            <div className='mt-6 rowTwoInput'>
                                <Input
                                    label={t('ticket.name')}
                                    readOnly
                                    placeholder={getProfile?.data?.data?.user?.firstName + ' ' + getProfile?.data?.data?.user?.lastName}
                                />
                                <Input
                                    label={t('ticket.email')}
                                    readOnly
                                    placeholder={getProfile?.data?.data?.user?.email}
                                />
                            </div>


                            <div className='mt-6 rowTwoInput'>
                                <Input
                                    label={t('ticket.subject')}
                                    placeholder={t('ticket.enter_your_subject')}
                                    name='subject'
                                    value={formik.values.subject}
                                    onChange={formik.handleChange}
                                    error_text={formik.touched.subject && formik.errors.subject ? formik.errors.subject : ''}
                                />
                                <Select
                                    label={t('ticket.priority')}
                                    items={[
                                        {
                                            label: t('ticket.low'),
                                            value: 'LOW'
                                        },
                                        {
                                            label: t('ticket.medium'),
                                            value: 'MEDIUM'
                                        },
                                        {
                                            label: t('ticket.high'),
                                            value: 'HIGH'
                                        }
                                    ]}
                                    placeholder={t('select')}
                                    className='border'
                                    name='priority'
                                    value={formik.values.priority}
                                    onChange={formik.handleChange}
                                    error_text={formik.touched.priority && formik.errors.priority ? formik.errors.priority : ''}
                                />
                            </div>

                            <div className='mt-6 rowTwoInput'>
                                <Select
                                    label={t('ticket.select_your_service')}
                                    placeholder={t('ticket.not_once')}
                                    className='border'
                                    name='danakServiceId'
                                    items={getMyservice.data?.data?.subscriptions?.map((item: MyServicesItem) => ({
                                        label: item.plan?.service?.name,
                                        value: item.plan?.service.id
                                    })
                                    )}
                                    onChange={formik.handleChange}
                                    error_text={formik.touched.danakServiceId && formik.errors.danakServiceId ? formik.errors.danakServiceId : ''}
                                />
                                <Select
                                    label={t('ticket.category')}
                                    items={getCategories.data?.data?.ticketCategories?.map((item: { id: string, title: string }) => ({
                                        label: item.title,
                                        value: item.id
                                    })
                                    )}
                                    placeholder={t('select')}
                                    className='border'
                                    name='categoryId'
                                    value={formik.values.categoryId}
                                    onChange={formik.handleChange}
                                    error_text={formik.touched.categoryId && formik.errors.categoryId ? formik.errors.categoryId : ''}
                                />
                            </div>
                            <div className='mt-6'>
                                <Textarea
                                    label={t('description')}
                                    placeholder={t('ticket.your_description')}
                                    name='message'
                                    value={formik.values.message}
                                    onChange={formik.handleChange}
                                    error_text={formik.touched.message && formik.errors.message ? formik.errors.message : ''}
                                />
                            </div>

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

                            <div className='mt-8 flex justify-end'>
                                <Button
                                    className='xl:max-w-[100px]'
                                    onClick={() => formik.handleSubmit()}
                                    isLoading={createTicket.isPending || multiUpload.isPending}
                                    percentage={percent}
                                >
                                    <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 xl:block hidden py-10 px-5 h-fit rounded-3xl'>
                            <div className='text-sm'>
                                {t('ticket.title_hint')}
                            </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'>
                                        پاسخگویی 24 ساعته تلفنی را تنها از داناک می توانید انتظار داشته باشید .بخش پشتیبانی در هر ساعتی حتی در روز های تعطیل آماده پیگیری سریع مشکلات کاربران است.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            }



        </div>
    )
}

export default CreateTicket