import {
    createRef,
    forwardRef,
    useImperativeHandle,
    useState,
} from 'react';

import {
    Block,
    Button,
    Link,
    List,
    ListInput,
    Navbar,
    Page,
    Popup,
} from 'konsta/react';
import {
    MdClose,
    MdDelete,
} from 'react-icons/md';

import {
    mFastAnswers,
    rpc,
} from '../api/request';
import { ShmFastAnswerType } from '../api/types';
import store from '../stores/store';
import { showAlert } from './AlertRoot';

export type FastAnswerPopupRootRefProps = {
    open: (fastAnswer?: ShmFastAnswerType) => void,
    close: () => void,
}

export const fastAnswerPopupRootRef = createRef<FastAnswerPopupRootRefProps>();

const FastAnswerPopupRoot = forwardRef<FastAnswerPopupRootRefProps>((props, ref) => {

    const [opened, setOpened] = useState(false);
    const [fastAnswer, setFastAnswer] = useState<ShmFastAnswerType>({
        name: '',
        text: '',
    });
    useImperativeHandle(ref, () => ({
        open: (fastAnswer?: ShmFastAnswerType) => {
            setOpened(true);
            if (fastAnswer) {
                setFastAnswer(fastAnswer);
            } else {
                setFastAnswer({
                    name: '',
                    text: '',
                });
            }
        },
        close: () => setOpened(false),
    }));



    return (
        <Popup
            opened={opened}

            onBackdropClick={() => setOpened(false)}
        >
            <Page className="ios:bg-white ios:dark:bg-stone-900 ">
                <Navbar
                    title="Быстрый ответ"
                    right={
                        <Link iconOnly onClick={() => setOpened(false)}>
                            <MdClose size={24} />
                        </Link>
                    }
                />

                <List outline dividers>

                    <ListInput
                        value={fastAnswer.name}
                        onChange={(e) => setFastAnswer((prev) => ({ ...prev, name: e.target.value }))}
                        title="Название"
                        placeholder="Введите название"
                    />
                    <ListInput
                        value={fastAnswer.text}
                        onChange={(e) => setFastAnswer((prev) => ({ ...prev, text: e.target.value }))}
                        inputClassName="!h-20 resize-none"
                        type="textarea"
                        title="Текст быстрого ответа"
                        placeholder="Введите текст быстрого ответа"
                    />


                </List>
                <Block className='flex items-center justify-center gap-2'>
                    <Button
                        disabled={!fastAnswer.name || !fastAnswer.text}
                        onClick={() => {

                            rpc.mFastAnswers({

                                id: fastAnswer._id,
                                name: fastAnswer.name,
                                text: fastAnswer.text,

                            }).then(({ result }) => {
                                store.loadFastAnswers();

                                setOpened(false)
                            });



                        }}
                    >
                        Сохранить
                    </Button>

                    {!!fastAnswer._id && <Button
                        outline

                        onClick={() => {

                            showAlert({
                                title: 'Удалить быстрый ответ?',
                                content: 'Вы уверены, что хотите удалить этот быстрый ответ?',
                                buttons: [
                                    {
                                        text: 'Удалить',
                                        onClick: () => {
                                            mFastAnswers({
                                                delete: true,
                                                id: fastAnswer._id,
                                            }).then(({ result }) => {
                                                store.loadFastAnswers();
                                                setOpened(false)
                                            });
                                        }
                                    },
                                    {
                                        text: 'Отмена',
                                        onClick: () => {
                                        },
                                    },
                                ],
                            })





                        }}
                    >
                        <MdDelete size={24} /> Удалить
                    </Button>}
                </Block>

            </Page>
        </Popup>
    );
});

export default FastAnswerPopupRoot;