import 'quill/dist/quill.snow.css';

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

import _ from 'lodash';

import { Button } from '@/components/ui/button';
import { SystemWindowDialog } from '@/components/ui/system-window-dialog';

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

export const HallSelectorData = (props: ItemDataProps) => {
    const [localValue, setLocalValue] = useState(props.getValue());

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

    const onSelect = (ids: string[]) => {

        setLocalValue((prev: any) => {

            let newIds: string[] = [...(prev ?? []), ...ids];
            return _.uniq(newIds);
        });

    };
    const onUnSelect = (ids: string[]) => {
        setLocalValue(localValue?.filter((id: string) => !ids.includes(id)) ?? []);
    };

    const [open, setOpen] = useState(false);


    return (<>
        <div style={{ width: '100%' }}>
            <DataLabel {...props} />

            <Button
                variant="outline"
                className='w-full h-auto'
                onClick={() => {
                    setOpen(true);
                }}
            >{!!localValue?.length ? `Выбранно: ${localValue?.length}` : 'Выбрать места'}</Button>


            <DataDescription {...props} />
        </div>
        <SystemWindowDialog
            open={open}
            onOpenChange={setOpen}
            title="Выбор места"
            width="50vw"
            height="80vh"
            allowFullscreen
            bodyClassName="p-0 overflow-hidden flex flex-col"
        >
            <div className="flex min-h-0 flex-1 flex-col">
                <HallPreview
                    selected={localValue}
                    hallID={props.structure.hallSelectorHallUUID!}
                    activeElements={props.structure.hallSelectorElements ?? []}
                    reverseSelect={props.structure.hallSelectorReverse ?? false}
                    onSelect={(ids) => {
                        onSelect(ids);
                    }}
                    onUnSelect={(ids) => {
                        onUnSelect(ids);
                    }}
                />
            </div>
        </SystemWindowDialog>
    </>
    );
};
