dkala-admin/src/pages/comments/List.tsx

import { type FC, useState } from 'react'
import Table from '@/components/Table'
import Filters from '@/components/Filters'
import Switch from '@/components/Switch'
import { Eye } from 'iconsax-react'
import type { RowDataType, ActionType } from '@/components/types/TableTypes'
import type { FilterValues } from '@/components/Filters'
import { Link } from 'react-router-dom'
import { Pages } from '@/config/Pages'
import { formatOptionalDate } from '@/helpers/func'

interface CommentData extends RowDataType {
    id: number
    number: string
    customerName: string
    strengths: string
    weaknesses: string
    food: string
    date: string
    isDisplayed: boolean
}

const CommentsList: FC = () => {
    const [currentPage, setCurrentPage] = useState(1)
    const totalPages = 2

    const handlePageChange = (page: number) => {
        setCurrentPage(page)
    }

    const handleFiltersChange = (newFilters: FilterValues) => {
        console.log('فیلترها:', newFilters)
    }

    const handleRowActions = (item: CommentData): ActionType[] => {
        return [
            {
                label: 'ویرایش',
                onClick: () => {
                    console.log('ویرایش کامنت:', item.id)
                },
            },
            {
                label: 'حذف',
                onClick: () => {
                    console.log('حذف کامنت:', item.id)
                },
            },
        ]
    }

    const handleDisplayToggle = (item: CommentData, value: boolean) => {
        console.log('تغییر وضعیت نمایش کامنت:', item.id, value)
    }

    const columns = [
        {
            key: 'number',
            title: 'شماره',
        },
        {
            key: 'customerName',
            title: 'نام و نام خانوادگی',
        },
        {
            key: 'strengths',
            title: 'نقاط قوت',
        },
        {
            key: 'weaknesses',
            title: 'نقاط ضعف',
        },
        {
            key: 'food',
            title: 'غذا',
        },
        {
            key: 'date',
            title: 'تاریخ',
            render: (item: CommentData) => {
                return <span>{formatOptionalDate(item.date)}</span>
            },
        },
        {
            key: 'isDisplayed',
            title: 'نمایش',
            render: (item: CommentData) => {
                return (
                    <Switch
                        active={item.isDisplayed}
                        onChange={(value) => handleDisplayToggle(item, value)}
                    />
                )
            },
        },
        {
            key: 'details',
            title: 'جزییات',
            render: (item: CommentData) => {
                return (
                    <Link to={Pages.comments.detail + item.id}>
                        <Eye size={20} color="#8C90A3" />
                    </Link>
                )
            },
        },
    ]

    const data: CommentData[] = [
        {
            id: 1,
            number: '۱۲۳۳۴',
            customerName: 'حمید ضرغامی',
            strengths: 'بهداشت محیطی خوب',
            weaknesses: 'تنوع کم و محدود',
            food: 'سالاد سزار ، پیتزا پیرونی',
            date: '2024-11-01',
            isDisplayed: true,
        },
        {
            id: 2,
            number: '۱۲۳۳۵',
            customerName: 'محمد رضایی',
            strengths: 'طعم عالی',
            weaknesses: 'زمان تحویل طولانی',
            food: 'برگر کلاسیک',
            date: '2024-11-02',
            isDisplayed: false,
        },
        {
            id: 3,
            number: '۱۲۳۳۶',
            customerName: 'فاطمه احمدی',
            strengths: 'بسته‌بندی مناسب',
            weaknesses: 'گران قیمت',
            food: 'سوشی مخصوص',
            date: '2024-11-03',
            isDisplayed: true,
        },
        {
            id: 4,
            number: '۱۲۳۳۷',
            customerName: 'علی کریمی',
            strengths: 'سرویس سریع',
            weaknesses: 'کم بودن حجم غذا',
            food: 'پاستا کربونارا',
            date: '2024-11-04',
            isDisplayed: true,
        },
        {
            id: 5,
            number: '۱۲۳۳۸',
            customerName: 'زهرا محمودی',
            strengths: 'کیفیت بالا',
            weaknesses: 'محدودیت در انتخاب',
            food: 'استیک گوشت',
            date: '2024-11-05',
            isDisplayed: false,
        },
        {
            id: 6,
            number: '۱۲۳۳۹',
            customerName: 'حسن نوری',
            strengths: 'ارزش غذایی مناسب',
            weaknesses: 'بوی نامطبوع',
            food: 'کباب ترکی',
            date: '2024-11-06',
            isDisplayed: true,
        },
    ]

    return (
        <div className='mt-5'>
            <div className='flex justify-between items-center'>
                <h1 className='text-lg font-light'>لیست کامنت‌ها</h1>
            </div>

            <div className='mt-8'>
                <Filters
                    fields={[
                        {
                            type: 'input',
                            name: 'search',
                            placeholder: 'جستجو',
                        },
                        {
                            type: 'date',
                            name: 'registrationDate',
                            placeholder: 'تاریخ ثبت',
                        },
                    ]}
                    onChange={handleFiltersChange}
                    searchField="search"
                />
            </div>

            <Table
                columns={columns}
                data={data}
                selectable={true}
                rowActions={handleRowActions}
                pagination={{
                    currentPage,
                    totalPages,
                    onPageChange: handlePageChange,
                }}
            />
        </div>
    )
}

export default CommentsList