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

import dayjs from 'dayjs';
import {
  Link,
  Navbar,
  Page,
  Segmented,
  SegmentedButton,
} from 'konsta/react';
import { observer } from 'mobx-react';
import { BsArrowLeftCircle } from 'react-icons/bs';
import { LuLogOut } from 'react-icons/lu';

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 = () => {

    if (!store.isMobile()) {

        return <Page className="ios:bg-white ios:dark:bg-black 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
                        title="Диалоги"
                        right={store.mode == 'full' && <Link onClick={() => {

                            localStorage.clear();
                            window.location.reload();

                        }}>
                            <LuLogOut size={24} />
                        </Link>}
                        subnavbar={<Segmented outline>
                            <SegmentedButton
                                onClick={() => store.setChannelTab("member")}
                                active={store.channelTab === "member"}
                                value="all"
                            >
                                Активные
                            </SegmentedButton>
                            <SegmentedButton
                                onClick={() => store.setChannelTab("join")}
                                active={store.channelTab === "join"}
                                value="unread"
                            >
                                Новые
                            </SegmentedButton>

                        </Segmented>}
                    />

                    <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 className='flex items-center gap-2 opacity-70 animate-pulse'><BsArrowLeftCircle size={24} /> Выберите диалог</div>
                    </div>}

                </div>


            </div>




        </Page>


    }



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



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

                right={store.mode == 'full' && <Link onClick={() => {
                    localStorage.clear();
                    window.location.reload();
                }}>
                    <LuLogOut size={24} />
                </Link>}


                subnavbar={<Segmented outline>
                    <SegmentedButton
                        onClick={() => store.setChannelTab("member")}
                        active={store.channelTab === "member"}
                        value="member"
                    >
                        Активные
                    </SegmentedButton>
                    <SegmentedButton
                        active={store.channelTab === "join"}
                        onClick={() => store.setChannelTab("join")}
                        value="join"
                    >
                        Новые
                    </SegmentedButton>

                </Segmented>}
            />}




            <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);
