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

import { useState } from 'react';

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

import { ShmChannelType } from '../../api/types';
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 [channelTab, setChannelTab] = useState<"member" | "join">("member");

    const [selectChannel, setSelectChannel] = useState<ShmChannelType | null>(null);


    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-hidden'
                >




                    <Navbar
                        title="Диалоги"
                        right={store.mode == 'full' && <Link onClick={() => {

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

                        }}>
                            <LuLogOut size={24} />
                        </Link>}
                        subnavbar={<Segmented outline>
                            <SegmentedButton
                                onClick={() => setChannelTab("member")}

                                active={channelTab === "member"}
                                value="all"
                            >
                                Активные
                            </SegmentedButton>
                            <SegmentedButton
                                onClick={() => setChannelTab("join")}
                                active={channelTab === "join"}
                                value="unread"
                            >
                                Новые
                            </SegmentedButton>

                        </Segmented>}
                    />

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


                </div>

                <div className='flex-1 '>

                    {selectChannel?._id && <ChannelPage channelID={selectChannel?._id} noPage />}

                </div>


            </div>




        </Page>


    }



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



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

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


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

                </Segmented>}
            />}




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

                }}
                selectChannel={selectChannel}

            />

        </Page>


    );
};

export default observer(MainPage);
