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

import _ from 'lodash';
import { Edit2Icon } from 'lucide-react';

import { rpc } from '@/api/request';
import {
    dialogHallEditorRef,
} from '@/componentsRoot/DialogHallEditor/DialogHallEditor';
import DialogHallPreview from '@/componentsRoot/DialogHallEditor/DialogHallPreview';
import { toast } from '@/componentsRoot/ToastRoot';
import { Button } from '@/components/ui/button';
import { Lang } from '@/lang/Lang';

import DataDescription from './components/DataDescription';
import DataLabel from './components/DataLabel';
import { ItemDataProps } from './types';
import useAppConfigStore, { useAppConfig } from '@/stores/appConfig';

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



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

    useEffect(() => {



        //Если массив то записываем в локальное значение

        props.setValue(localValue);
    }, [localValue]);

    useEffect(() => {

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

        //Если есть значение и строка то делаем запрос на получение элементов зала
        if (localValue && typeof localValue === 'string') {
            rpc.hallElements({
                hallUUID: localValue
            }).then((data) => {
                setLocalValue(data.result ?? []);
            });
        }

        if (localValue && _.size(localValue) > 0) {
            setLocalValue(localValue);
        }



    }, []);

    const { isMobile } = useAppConfigStore();
    const { color } = useAppConfig();



    const width = window.innerWidth > 300 ? 300 : 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>
    );
};


