import { useState, type FC } from 'react'
import { Link } from 'react-router-dom'
import { useGetUsers } from './hooks/useUserData'
import Table from '@/components/Table'
import PresignedImage from '@/components/PresignedImage'
import moment from 'moment-jalaali'
import Button from '@/components/Button'
import { AddSquare, Edit } from 'iconsax-react'
import { Paths } from '@/config/Paths'

const UsersList: FC = () => {
    const [page, setPage] = useState<number>(1)
    const { data } = useGetUsers(page)

    return (
        <div className='mt-5'>
            <div className='flex justify-between items-center'>
                <h1 className='text-lg font-light'>کاربران</h1>
                <Link to={Paths.users.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
                columns={[
                    {
                        key: 'avatarUrl',
                        title: 'آواتار',
                        render: (item) => item.avatarUrl
                            ? <PresignedImage src={item.avatarUrl} className='w-10 h-10 rounded-full object-cover' alt='' />
                            : '-',
                    },
                    {
                        key: 'fullName',
                        title: 'نام و نام خانوادگی',
                        render: (item) => {
                            if (item.firstName)
                                return (
                                    <div>{item.firstName + ' ' + item.lastName}</div>
                                )
                            else return (
                                <div>{item.phone}</div>
                            )
                        }
                    },
                    {
                        key: 'phone',
                        title: 'موبایل'
                    },
                    {
                        key: 'createdAt',
                        title: 'تاریخ ثبت نام',
                        render: (item) => {
                            return (
                                <div>{moment(item.createdAt).format('jYYYY-jMM-jDD')}</div>
                            )
                        }
                    },
                    {
                        key: 'actions',
                        title: 'عملیات',
                        render: (item) => (
                            <Link
                                to={`${Paths.users.update}${item.id}`}
                                className="inline-block p-1 hover:opacity-70"
                                aria-label="ویرایش"
                            >
                                <Edit size={20} color="#0037FF" />
                            </Link>
                        ),
                    },
                ]}
                data={data?.data}
                pagination={{
                    currentPage: page,
                    onPageChange: setPage,
                    totalPages: data?.meta?.totalPages as number
                }}
            />
        </div>
    )
}

export default UsersList