import { type FC } from 'react'
import { useDeleteSection, useGetSections } from './hooks/usePrintData'
import { Link } from 'react-router-dom'
import { Paths } from '@/config/Paths'
import Button from '@/components/Button'
import { AddSquare, Edit, More2 } from 'iconsax-react'
import Table from '@/components/Table'
import TrashWithConfrim from '@/components/TrashWithConfrim'

const SectionList: FC = () => {

    const { data } = useGetSections()
    const { mutate, isPending } = useDeleteSection()

    return (
        <div className='mt-5'>
            <div className='flex justify-between items-center'>
                <h1 className='text-lg font-light'>بخش</h1>

                <Link
                    to={Paths.print.create}
                >
                    <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>

            <Table
                data={data?.data}
                columns={[
                    {
                        key: 'title',
                        title: 'عنوان'
                    },
                    {
                        key: 'order',
                        title: 'ترتیب'
                    },
                    {
                        key: 'attribute',
                        title: 'ویژگی ها',
                        render: (item) => {
                            return (
                                <Link to={Paths.formBuilder.list + item.id + `/print`} className='flex text-[#0037FF] gap-2 items-center'>
                                    <More2 size={18} color='#0037FF' />
                                    <div className='text-[13px]'>ویژگی ها</div>
                                </Link>
                            )
                        }
                    },
                    {
                        key: 'actions',
                        title: '',
                        render: (item) => {
                            return (
                                <div className='flex gap-2 items-center'>
                                    <Link to={Paths.print.update + item.id}>
                                        <Edit size={20} color='#0037FF' />
                                    </Link>
                                    <TrashWithConfrim
                                        onDelete={() => mutate(item.id)}
                                        isloading={isPending}
                                        colorIcon='red'
                                    />
                                </div>
                            )
                        }
                    },
                ]}
            />

        </div>
    )
}

export default SectionList