import 'dayjs/locale/ru'; // load on demand

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

import dayjs from 'dayjs';
import {
    Button,
    Link,
    List,
    ListItem,
    Navbar,
    Page,
    Popover,
} from 'konsta/react';
import { observer } from 'mobx-react';
import { CgMenuRight } from 'react-icons/cg';
import { LuLogOut } from 'react-icons/lu';

import { showAlert } from '../../components/AlertRoot';
import pattern from '../../pattern.jpg';
import { ROUTER } from '../../router/router';
import store from '../../stores/store';
import ChannelPage from '../ChannelPage/ChannelPage';
import DialogsList from './components/DialogsList';

dayjs.locale("ru");


const MainPage = () => {

    const onLogout = () => {


        showAlert({
            title: 'Вы уверены?',
            content: 'Вы уверены, что хотите выйти из аккаунта?',
            buttons: [
                {
                    text: 'Выйти',
                    onClick: () => {
                        localStorage.clear();
                        window.location.reload();
                    },
                },
                {
                    text: 'Отмена',
                    onClick: () => { },
                },
            ],
        })
    }

    const [menuPopoverOpened, setMenuPopoverOpened] = useState(false);
    const menuPopoverTargetRef = useRef<HTMLDivElement>(null);
    if (!store.isMobile()) {

        return <Page className="ios:bg-white ios:dark:bg-stone-900 overflow-hidden flex items-center justify-center">

            <div className='flex h-screen w-full overflow-hidden'>

                <div
                    className='w-[400px]  flex-shrink-0 overflow-y-scroll border-r border-gray-200 dark:border-gray-800 '
                >




                    <Navbar
                        centerTitle
                        outline
                        title="Диалоги"

                        left={<Link
                            ref={menuPopoverTargetRef}
                            onClick={() => {
                                setMenuPopoverOpened(true);
                            }}>
                            <CgMenuRight />
                        </Link>}

                        right={store.mode == 'full' && <Link onClick={() => {

                            onLogout();

                        }}>
                            <LuLogOut size={24} />
                        </Link>}
                        subnavbar={<div className='flex items-center w-full'>

                            <Button


                                rounded

                                className='rounded-r-none'
                                smallMaterial

                                tonal={store.channelTab !== 'member'}
                                onClick={() => store.setChannelTab('member')}>Активные</Button>
                            <Button
                                rounded
                                className='rounded-l-none'
                                smallMaterial
                                tonal={store.channelTab !== 'join'}
                                onClick={() => store.setChannelTab('join')}>Новые</Button>


                        </div>}
                    />



                    <DialogsList
                        selectChannelID={store.selectChannel?._id ?? null}
                        channelTab={store.channelTab}
                        onSelectChannel={(channel) => store.setSelectChannel(channel)}
                        selectChannel={store.selectChannel}
                    />


                </div>

                <div className='flex-1 '>

                    {store.selectChannel?._id ? <ChannelPage channelID={store.selectChannel?._id} noPage /> : <div


                        className="overflow-y-scroll h-screen  relative flex items-center justify-center">

                        <div
                            className='absolute top-0 left-0 w-full h-full bg-cover bg-center opacity-10 '
                            style={{
                                background: `url(${pattern})`
                            }}
                        >



                        </div>
                    </div>}

                </div>


            </div>




            <Popover
                opened={menuPopoverOpened}
                target={menuPopoverTargetRef.current}
                onBackdropClick={() => setMenuPopoverOpened(false)}
            >
                <List nested>
                    <ListItem
                        title="Быстрые ответы"
                        link
                        onClick={() => setMenuPopoverOpened(false)}
                    />
                    <ListItem
                        title="List Item 2"
                        link
                        onClick={() => setMenuPopoverOpened(false)}
                    />
                    <ListItem
                        title="Item 3"
                        link
                        onClick={() => setMenuPopoverOpened(false)}
                    />
                    <ListItem
                        title="List Item 4"
                        link
                        onClick={() => setMenuPopoverOpened(false)}
                    />
                    <ListItem
                        title="Item 5"
                        link
                        onClick={() => setMenuPopoverOpened(false)}
                    />
                </List>
            </Popover>


        </Page>


    }



    return (
        <Page className="ios:bg-white ios:dark:bg-stone-900 ">



            {!store.cap && <Navbar
                title="Диалоги"

                right={store.mode == 'full' && <Link onClick={() => {
                    onLogout();
                }}>
                    <LuLogOut size={24} />
                </Link>}

                subnavbar={<div className='flex items-center w-full'>

                    <Button


                        rounded

                        className='rounded-r-none'
                        smallMaterial

                        tonal={store.channelTab !== 'member'}
                        onClick={() => store.setChannelTab('member')}>Активные</Button>
                    <Button
                        rounded
                        className='rounded-l-none'
                        smallMaterial
                        tonal={store.channelTab !== 'join'}
                        onClick={() => store.setChannelTab('join')}>Новые</Button>


                </div>}



            />}





            <DialogsList
                selectChannelID={store.selectChannel?._id ?? null}
                channelTab={store.channelTab}
                onSelectChannel={(channel) => {
                    store.setSelectChannel(channel);
                    if (channel?._id) {
                        ROUTER().ChannelPage.move({ channelID: channel._id });
                    }
                }}
                selectChannel={store.selectChannel}
            />

        </Page>


    );
};

export default observer(MainPage);
