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-full w-full overflow-hidden">
          <div className="w-[400px] 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);
