import { FC } from "react";
import { IconEditCircle, IconX } from "@tabler/icons-react";
import { Card, Group, Stack, Text, Title } from "@mantine/core";
import { useModuleEditorContext } from "@/app/module-editor/[moduleId]/contexts/ModuleEditorContext";
import styles from "@/app/module-editor/[moduleId]/ModuleEditor.module.css";
import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
import { ModuleAttributeSchema } from "@/lib/client";

type Props = {
    attribute: ModuleAttributeSchema;
};

const ModuleAttribute: FC<Props> = ({ attribute }) => {
    const {
        attributeActions: { removeAttributeFromModule, onEditAttributeLabel },
    } = useModuleEditorContext();

    const getAttrLabelText = () => {
        const order = 6;

        if (attribute.label === attribute.originalLabel) {
            return <Title order={order}>Название: {attribute.label}</Title>;
        }
        return (
            <Group gap={"xs"}>
                <Title order={order}>Название: {attribute.label}</Title>{" "}
                <Text>(Ориг. {attribute.originalLabel})</Text>
            </Group>
        );
    };

    return (
        <Card
            flex={1}
            className={styles["module-attr-container"]}>
            <Group
                w={"100%"}
                h={"100%"}
                justify={"space-between"}
                align={"center"}>
                <Stack gap={7}>
                    <>{getAttrLabelText()}</>
                    <Text>
                        Тип: {attribute.type.name}{" "}
                        {attribute.select && `"${attribute.select.label}"`}
                    </Text>
                </Stack>
                <Group
                    justify={"end"}
                    wrap={"nowrap"}
                    w={"100%"}
                    gap={"xs"}>
                    <ActionIconWithTip
                        tipLabel={
                            "Редактировать название (только для данного модуля)"
                        }
                        onClick={() => onEditAttributeLabel(attribute)}>
                        <IconEditCircle />
                    </ActionIconWithTip>
                    <ActionIconWithTip
                        tipLabel={"Удалить из модуля"}
                        onClick={() => removeAttributeFromModule(attribute)}>
                        <IconX />
                    </ActionIconWithTip>
                </Group>
            </Group>
        </Card>
    );
};

export default ModuleAttribute;
