import { CRUDTableProps } from "../../../../../types/CRUDTable.tsx";
import { BaseTransactionTagSchema, TransactionTagSchema } from "../../../../../client";
import { FC, useState } from "react";
import { ActionIcon, Flex, Stack, Tooltip } from "@mantine/core";
import { IconCheck, IconEdit, IconTrash } from "@tabler/icons-react";
import { MRT_TableOptions } from "mantine-react-table";
import { BaseTable } from "../../../../../components/BaseTable/BaseTable.tsx";
import { useTransactionTagsTableColumns } from "../hooks/useTransactionTagsTableColumns.tsx";
import CreateTransactionTagForm from "./CreateTransactionTagForm.tsx";

type isIncome = {
    isIncome: boolean;
}
type Props = CRUDTableProps<TransactionTagSchema, BaseTransactionTagSchema> & isIncome;

const TransactionTagsTable: FC<Props> = ({ items, onCreate, onDelete, onChange, isIncome }) => {
    const [editingTagId, setEditingTagId] = useState<number>(-1);
    const [tagName, setTagName] = useState<string>("");

    const columns = useTransactionTagsTableColumns({ editingTagId, setTagName });

    const onStartEditing = (tag: TransactionTagSchema) => {
        setEditingTagId(tag.id);
        setTagName(tag.name);
    };

    const onFinishEditing = (tag: TransactionTagSchema) => {
        if (!onChange) return;
        if (tag.name !== tagName) {
            onChange({
                id: editingTagId,
                name: tagName,
                isIncome: isIncome,
            });
        }

        setEditingTagId(-1);
        setTagName("");
    };

    return (
        <Stack>
            <CreateTransactionTagForm
                onCreate={item => onCreate && onCreate(item)}
                isIncome={isIncome}
            />
            <BaseTable
                data={items}
                columns={columns}
                restProps={
                    {
                        enableRowActions: true,
                        enableSorting: false,
                        enableColumnActions: false,
                        renderRowActions: ({ row }) => (
                            <Flex gap="md">
                                <Tooltip label="Редактировать">
                                    {
                                        editingTagId === row.original.id ? (
                                            <ActionIcon
                                                onClick={() => onFinishEditing(row.original)}
                                                variant={"default"}>
                                                <IconCheck />
                                            </ActionIcon>
                                        ) : (
                                            <ActionIcon
                                                onClick={() => onStartEditing(row.original)}
                                                variant={"default"}>
                                                <IconEdit />
                                            </ActionIcon>
                                        )
                                    }
                                </Tooltip>
                                <Tooltip label="Удалить">
                                    <ActionIcon
                                        onClick={() => onDelete && onDelete(row.original)}
                                        variant={"default"}>
                                        <IconTrash />
                                    </ActionIcon>
                                </Tooltip>
                            </Flex>
                        ),
                    } as MRT_TableOptions<TransactionTagSchema>
                }
            />
        </Stack>
    );
};

export default TransactionTagsTable;