import { MoonOutlined, SunOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Flex, Image, Layout, Switch, Tooltip } from "antd";
import { ReactNode } from "react";

import { toggleTheme } from "features/theme/themeSlice.ts";
import useBreakPoint from "hooks/useBreakPoint.ts";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
import { colors, ProBlack2 } from "ThemeConstants.ts";
import LangSelect from "./components/langSelect/LangSelect.tsx";
import HeaderNav from "./HeaderNav.tsx";
import "./styles.css";

const { Content } = Layout;
type AppLayoutProps = {
  children: ReactNode;
};

export const AppLayout = ({ children }: AppLayoutProps) => {
  const dispatch = useAppDispatch();
  const { t } = useTranslation();
  const { themeName } = useAppSelector((state) => state.theme);
  const { isDesktop } = useBreakPoint();

  return (
    <>
      <Layout
        style={{
          minHeight: "100vh",
        }}
      >
        {isDesktop && (
          <HeaderNav className="header-nav">
            <Flex align="center" gap="middle">
              <Tooltip>
                <Button
                  type="text"
                  icon={<UserOutlined />}
                  className="user-icon"
                />
              </Tooltip>
            </Flex>

            <Flex align="center" gap="middle">
              <Tooltip title={t("language")}>
                <div style={{ position: "relative", top: -26 }}>
                  <LangSelect />
                </div>
              </Tooltip>

              <Tooltip title="Theme">
                <Switch
                  checkedChildren={<MoonOutlined />}
                  unCheckedChildren={<SunOutlined />}
                  checked={themeName === "light" ? true : false}
                  onClick={() => dispatch(toggleTheme())}
                  style={{
                    background:
                      themeName === "dark" ? colors.primary : ProBlack2,
                    borderRadius: "12px",
                  }}
                />
              </Tooltip>

              <Image
                src="/me.png"
                alt="user profile photo"
                height={40}
                width={40}
                className="user-profile-image"
                preview={false}
              />
            </Flex>
          </HeaderNav>
        )}
        <Content>{children}</Content>
      </Layout>
    </>
  );
};