import { CSSProperties, FC, JSX } from "react";
import { Checkbox, NumberInput, TextInput } from "@mantine/core";
import { DatePickerInput, DateTimePicker } from "@mantine/dates";
import AttrOptionSelect from "@/app/deals/drawers/DealEditorDrawer/components/AttrOptionSelect";
import { DealModuleAttributeSchema } from "@/lib/client";
import { naiveDateTimeStringToUtc } from "@/utils/datetime";

type Props = {
    attrInfo: DealModuleAttributeSchema;
    value: any;
    onChange: (value: any) => void;
    error?: string;
    style?: CSSProperties;
};

const AttributeValueInput: FC<Props> = ({
    attrInfo,
    value,
    onChange,
    error,
    style,
}) => {
    const commonProps = {
        label: attrInfo.label,
        style,
        error,
    };

    const renderCheckbox = () => (
        <Checkbox
            {...commonProps}
            checked={Boolean(value)}
            onChange={e => onChange(e.currentTarget.checked)}
        />
    );

    const renderDatePicker = () => (
        <DatePickerInput
            {...commonProps}
            value={value ? new Date(String(value)) : null}
            onChange={val => {
                onChange(val ? new Date(val) : null);
            }}
            clearable
            locale={"ru"}
            valueFormat={"DD.MM.YYYY"}
        />
    );

    const renderDateTimePicker = () => (
        <DateTimePicker
            {...commonProps}
            value={value ? naiveDateTimeStringToUtc(value) : null}
            onChange={val => {
                if (!val) return;
                const localDate = new Date(val.replace(" ", "T"));
                const utcString = localDate
                    .toISOString()
                    .substring(0, 19)
                    .replace("T", " ");
                onChange(utcString);
            }}
            clearable
            locale={"ru"}
            valueFormat={"DD.MM.YYYY HH:mm"}
        />
    );

    const renderTextInput = () => (
        <TextInput
            {...commonProps}
            value={value ?? ""}
            onChange={e => onChange(e.currentTarget.value)}
        />
    );

    const renderNumberInput = () => (
        <NumberInput
            {...commonProps}
            allowDecimal={attrInfo.type.type === "float"}
            value={value ? Number(value) : undefined}
            onChange={value => onChange(Number(value))}
        />
    );

    const renderSelect = () => {
        if (!attrInfo.select?.id) return <></>;
        return (
            <AttrOptionSelect
                {...commonProps}
                value={value}
                onChange={onChange}
                selectId={attrInfo.select.id}
            />
        );
    };

    const renderingFuncMap: Record<string, () => JSX.Element> = {
        bool: renderCheckbox,
        date: renderDatePicker,
        datetime: renderDateTimePicker,
        str: renderTextInput,
        int: renderNumberInput,
        float: renderNumberInput,
        select: renderSelect,
    };

    const render = renderingFuncMap[attrInfo.type.type];
    return render();
};

export default AttributeValueInput;
