import { DataTableColumn } from 'mantine-datatable';
import IconEdit from '../../../components/Icon/IconEdit';
import IconEye from '../../../components/Icon/IconEye';
import IconTrashLines from '../../../components/Icon/IconTrashLines';
import { Product } from '../types/api';
import { formatPrice } from '../../../utils/format-price';

type ProductTableProps = {
    onEdit: (product: Product) => void;
    onView: (product: Product) => void;
    onDelete: (product: Product) => void;
};

export const productColumns = ({ onEdit, onView, onDelete }: ProductTableProps): DataTableColumn<Product>[] => [
    {
        accessor: 'sku',
        title: 'SKU',
        sortable: true,
        render: ({ sku }) => sku,
    },
    {
        accessor: 'name',
        title: 'Name',
        sortable: true,
    },
    {
        accessor: 'category.name',
        title: 'Category',
        sortable: true,
        render: ({ category }) => category.name,
    },
    {
        accessor: 'collection.name',
        title: 'Collection',
        sortable: true,
        render: ({ collection }) => collection.name,
    },
    {
        accessor: 'colour.name',
        title: 'Colour',
        sortable: true,
        render: ({ colour }) => (
            <div className="flex items-center gap-2">
                <span className="inline-block w-3 h-3 rounded-full" style={{ backgroundColor: colour.hex }} />
                <span>{colour.name}</span>
            </div>
        ),
    },
    {
        accessor: 'size.name',
        title: 'Size',
        sortable: true,
        render: ({ size }) => size.name,
    },
    {
        accessor: 'price',
        title: 'Price',
        sortable: true,
        textAlignment: 'right',
        render: ({ price }) => <div className="text-right font-semibold">{formatPrice(price)}</div>,
    },
    {
        accessor: 'hpp',
        title: 'HPP',
        sortable: true,
        render: ({ hpp }) => <div className="text-right font-semibold">{formatPrice(hpp)}</div>,
    },
    {
        accessor: 'unit_of_measure',
        title: 'Unit of Measure',
        sortable: true,
        render: ({ unit_of_measure }) => unit_of_measure,
    },
    {
        accessor: 'is_raw_material',
        title: 'Raw Material',
        sortable: true,
        render: ({ is_raw_material }) => <span className={`badge ${is_raw_material ? 'bg-success' : 'bg-danger'}`}>{is_raw_material ? 'Yes' : 'No'}</span>,
    },
    {
        accessor: 'is_finished_good',
        title: 'Finished Good',
        sortable: true,
        render: ({ is_finished_good }) => <span className={`badge ${is_finished_good ? 'bg-success' : 'bg-danger'}`}>{is_finished_good ? 'Yes' : 'No'}</span>,
    },
    {
        accessor: 'action',
        title: 'Actions',
        sortable: false,
        textAlignment: 'center',
        render: (data) => (
            <div className="flex gap-4 items-center w-max mx-auto">
                <button type="button" className="hover:text-info" onClick={() => onEdit(data)}>
                    <IconEdit className="w-4.5 h-4.5" />
                </button>
                <button type="button" className="hover:text-primary" onClick={() => onView(data)}>
                    <IconEye className="w-4.5 h-4.5" />
                </button>
                <button type="button" className="hover:text-danger" onClick={() => onDelete(data)}>
                    <IconTrashLines className="w-4.5 h-4.5" />
                </button>
            </div>
        ),
    },
];
