"use client";

import { useState } from "react";
import { ColorPicker, Flex, Space, Text } from "@mantine/core";
import { ContextModalProps } from "@mantine/modals";
import statusColors from "@/app/deals/utils/statusColors";
import InlineButton from "@/components/ui/InlineButton/InlineButton";

type Props = {
    color: string;
    onChange: (color: string) => void;
    switches?: string[];
};

const ColorPickerModal = ({
    id,
    context,
    innerProps,
}: ContextModalProps<Props>) => {
    const [color, setColor] = useState(innerProps.color);

    return (
        <Flex
            gap={"xs"}
            direction={"column"}>
            <ColorPicker
                format={"hex"}
                value={color}
                onChange={setColor}
                swatches={statusColors}
                styles={{
                    swatch: {
                        flex: 1,
                    },
                }}
                fullWidth
            />
            <Space />
            <InlineButton
                onClick={() => {
                    innerProps.onChange(color);
                    context.closeModal(id);
                }}>
                <Text>Сохранить</Text>
            </InlineButton>
        </Flex>
    );
};

export default ColorPickerModal;
