"use client";

import DataTableWithAuth from "@/core/components/DataTableWithAuth";
import { GET_OPERATOR_PEOPLE_MESSAGE_SUPERVISOR } from "@/core/utils/routes";
import { Box } from "@mui/material";
import { useMemo } from "react";
import moment from "jalali-moment";
import Player from "./Player";
import CloseIcon from '@mui/icons-material/Close';
import CheckIcon from '@mui/icons-material/Check';
import RateMessage from "./RateMessage";

const DataTable = () => {
    const columns = useMemo(
        () => [
            {
                accessorKey: "id",
                header: "کد یکتا",
                id: "id",
                enableColumnFilter: true,
                datatype: "text",
                filterMode: "equals",
                sortDescFirst: false,
                columnFilterModeOptions: ["equals", "contains"],
                grow: false,
                size: 100,
            },
            {
                header: "تاریخ",
                id: "date",
                enableColumnFilter: true,
                datatype: "text",
                filterMode: "equals",
                sortDescFirst: false,
                columnFilterModeOptions: ["equals", "contains"],
                grow: false,
                size: 100,
                Cell: ({ row }) =>
                    row.original.date ? moment(row.original.date).locale("fa").format("yyyy/MM/DD") : <>-</>,
            },
            {
                header: "ساعت",
                id: "time",
                enableColumnFilter: true,
                datatype: "text",
                filterMode: "equals",
                sortDescFirst: false,
                columnFilterModeOptions: ["equals", "contains"],
                grow: false,
                size: 100,
                Cell: ({ row }) =>
                    row.original.date ? moment(row.original.date).locale("fa").format("HH:mm") : <>-</>,
            },
            {
                accessorKey: "caller_phone_number",
                header: "شماره تماس",
                id: "caller_phone_number",
                enableColumnFilter: true,
                datatype: "text",
                filterMode: "equals",
                sortDescFirst: false,
                columnFilterModeOptions: ["equals", "contains"],
                grow: false,
                size: 100,
            },
            {
                header: "پخش صدا",
                id: "player",
                enableColumnFilter: true,
                datatype: "text",
                filterMode: "equals",
                sortDescFirst: false,
                columnFilterModeOptions: ["equals", "contains"],
                grow: false,
                size: 100,
                Cell: ({ row }) => <Player audioUrl={row.original.voice} messageId={row.original.id} />,
            },
            {
                header: "پخش صدا",
                id: "is_listen",
                enableColumnFilter: true,
                datatype: "text",
                filterMode: "equals",
                sortDescFirst: false,
                columnFilterModeOptions: ["equals", "contains"],
                grow: false,
                size: 100,
                Cell: ({ row }) => {
                    const isListen = row.original.is_listen;
                    const Icon = isListen ? CheckIcon : CloseIcon;
                    const color = isListen ? "success.main" : "error.main";

                    return (
                        <Box sx={{ display: "flex", justifyContent: "center" }}>
                            <Icon sx={{ color }} />
                        </Box>
                    );
                }
            },
            {
                accessorKey: "listen_at",
                header: "زمان شنیده شدن",
                id: "listen_at",
                enableColumnFilter: true,
                datatype: "text",
                filterMode: "equals",
                sortDescFirst: false,
                columnFilterModeOptions: ["equals", "contains"],
                grow: false,
                size: 100,
            },
            {
                accessorKey: "review_duration",
                header: "زمان بررسی (دقیقه)",
                id: "review_duration",
                enableColumnFilter: true,
                datatype: "text",
                filterMode: "equals",
                sortDescFirst: false,
                columnFilterModeOptions: ["equals", "contains"],
                grow: false,
                size: 100,
            },
            {
                header: "ارزیابی",
                id: "rate",
                enableColumnFilter: true,
                datatype: "text",
                filterMode: "equals",
                sortDescFirst: false,
                columnFilterModeOptions: ["equals", "contains"],
                grow: false,
                size: 100,
                Cell: ({ cell, row, table }) => {
                    const mutate = table.options.meta?.mutate;

                    return (
                        <RateMessage
                            mutate={mutate}
                            messageId={row.original.id}
                            initialValues={{
                                savaneh_id: row.original.savaneh_id,
                                action_id: row.original.action_id,
                                description: row.original.description,
                            }}
                        />
                    );
                },
            },
        ],
        []
    );

    return (
        <Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
            <DataTableWithAuth
                need_filter={true}
                columns={columns}
                table_url={GET_OPERATOR_PEOPLE_MESSAGE_SUPERVISOR}
                page_name={"operatorDialoguePage"}
                table_name={"operatorDialogueList"}
                positionActionsColumn={"last"}
            />
        </Box>
    );
};
export default DataTable;