import {
    useEffect,
    useState,
} from 'react';

import { Edit2Icon } from 'lucide-react';

import {
    dialogHallEditorRef,
} from '@/components/DialogHallEditor/DialogHallEditor';
import DialogHallPreview from '@/components/DialogHallEditor/DialogHallPreview';
import { toast } from '@/components/ToastRoot';
import { Button } from '@/components/ui/button';
import { useAppConfig } from '@/contexts/AppConfigContext';
import { Lang } from '@/lang/Lang';

import DataDescription from './components/DataDescription';
import DataLabel from './components/DataLabel';
import { ItemDataProps } from './types';

export const HallData = (props: ItemDataProps) => {



    const [localValue, setLocalValue] = useState(props.getValue());

    useEffect(() => {
        props.setValue(localValue);
    }, [localValue]);

    useEffect(() => {

        if (localValue === undefined || localValue === null) {
            setLocalValue(false);
        }


    }, []);

    const { color, isMobile } = useAppConfig();



    const width = window.innerWidth > 500 ? 500 : window.innerWidth - 40;



    return (
        <div className="">
            <DataLabel {...props} />


            <DialogHallPreview hall={localValue ?? null} width={width} height={width} />

            {(!props.onlyShow || !props.structure.editable) && <Button

                onClick={() => {

                    if (isMobile) {
                        toast.error(Lang.key('only_edit_on_desktop'));
                        return;
                    }

                    dialogHallEditorRef.current?.open({
                        initValue: localValue ?? null,
                        onSave: (hall) => {
                            setLocalValue(hall);
                        }
                    });
                }}
                variant="outline" className='mt-2'><Edit2Icon /> {Lang.key('edit')}</Button>}

            <DataDescription {...props} />
        </div>
    );
};


