import Button from '@/components/Button'
import { Paths } from '@/config/Paths'
import { AddSquare, Edit } from 'iconsax-react'
import { type FC } from 'react'
import { Link, useParams } from 'react-router-dom'
import { useDeleteField, useGetFields } from './hooks/useFormBuilderData'
import Table from '@/components/Table'
import TrashWithConfrim from '@/components/TrashWithConfrim'
import { toast } from 'react-toastify'
import { extractErrorMessage } from '@/config/func'

const FormBuilderList: FC = () => {

    const { id, type } = useParams()
    const { mutate: deleteField, isPending } = useDeleteField()
    const { data, refetch } = useGetFields(Number(id))

    const handleDelete = (id: number) => {
        deleteField(id, {
            onSuccess: () => {
                refetch()
            },
            onError: (error) => {
                toast.error(extractErrorMessage(error))
            }
        })
    }


    return (
        <div className='mt-5'>
            <div className='flex justify-between items-center'>
                <h1 className='text-lg font-light'>فیلد ها</h1>

                <Link
                    to={Paths.formBuilder.create + id + `/${type}`}
                >
                    <Button
                        className='w-fit px-6'
                    >
                        <div className='flex gap-1.5'>
                            <AddSquare size={18} color='black' />
                            <div className='text-[13px] font-light'>فیلد جدید</div>
                        </div>
                    </Button>
                </Link>
            </div>

            <div className='mt-8'>
                <Table
                    columns={[
                        {
                            key: 'name',
                            title: 'نام'
                        },
                        {
                            key: 'type',
                            title: 'نوع'
                        },
                        {
                            key: 'isRequired',
                            title: 'احباری',
                            render: (item) => {
                                return (
                                    <div>{item.isRequired ? 'اجباری' : 'اختیاری'}</div>
                                )
                            }
                        },
                        {
                            key: 'value',
                            title: 'مقادیر',
                            render: (item) => {
                                return (
                                    <Link to={Paths.formBuilder.values + item.id}>
                                        <Button className='w-fit px-5'>
                                            میدیریت مقادیر
                                        </Button>
                                    </Link>
                                )
                            }
                        },
                        {
                            key: 'actions',
                            title: '',
                            render: (item) => {
                                return (
                                    <div className='flex gap-2 items-center'>
                                        <Link to={Paths.formBuilder.update + item.id}>
                                            <Edit
                                                color='#0037FF'
                                                size={20}
                                            />
                                        </Link>

                                        <TrashWithConfrim
                                            isloading={isPending}
                                            colorIcon='red'
                                            onDelete={() => handleDelete(item.id)}
                                        />
                                    </div>
                                )
                            }
                        }
                    ]}
                    data={data?.data}
                />
            </div>

        </div>
    )
}

export default FormBuilderList