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

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

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




                    <Navbar
                        title="Диалоги"
                        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 channelTab={store.channelTab} />


                </div>

                <div className='flex-1 '>

                    {store.selectChannelID && <ChannelPage noPage />}

                </div>


            </div>




        </Page>


    }



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



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


                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 channelTab={store.channelTab} />

        </Page>


    );
};

export default observer(MainPage);
