import { ReactNode } from 'react';



import { Box, Button, ConditionalValue, Flex, HStack, IconButton, Span, Text, useDisclosure } from '@chakra-ui/react';
import { LuAlignJustify, LuArrowBigLeft, LuCircleUserRound, LuKeySquare, LuLogIn, LuLogOut, LuMoon, LuSettings, LuSun } from 'react-icons/lu';
import { MdHelp, MdHome, MdMore, MdOutlinePlaylistPlay, MdOutlineUploadFile, MdSupervisedUserCircle } from 'react-icons/md';
import { useNavigate } from 'react-router-dom';



import { useColorMode, useColorModeValue } from '@/components/ui/color-mode';
import { DrawerBody, DrawerContent, DrawerHeader, DrawerRoot } from '@/components/ui/drawer';
import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '@/components/ui/menu';
import { environment } from '@/environment';
import { useServiceContext } from '@/service/ServiceContext';
import { useSessionService } from '@/service/session';
import { colors } from '@/theme/colors';
import { requestOpenSite, requestSignIn, requestSignOut, requestSignUp } from '@/utils/sso';





export const TOP_BAR_HEIGHT = '50px';

export const BUTTON_TOP_BAR_PROPERTY = {
  variant: 'ghost' as ConditionalValue<
    'ghost' | 'outline' | 'solid' | 'subtle' | 'surface' | 'plain' | undefined
  >,
  //colorPalette: "brand",
  fontSize: '20px',
  textTransform: 'uppercase',
  height: TOP_BAR_HEIGHT,
};

export type TopBarProps = {
  children?: ReactNode;
  title?: string;
};

const ButtonMenuLeft = ({
  dest,
  title,
  icon,
  onClickEnd = () => {},
}: {
  dest: string;
  title: string;
  icon: ReactNode;
  onClickEnd?: () => void;
}) => {
  const navigate = useNavigate();
  return (
    <>
      <Button
        background="#00000000"
        borderRadius="0px"
        onClick={() => {
          navigate(dest);
          onClickEnd();
        }}
        width="full"
        {...BUTTON_TOP_BAR_PROPERTY}
      >
        <Box asChild style={{ width: '45px', height: '45px' }}>
          {icon}
        </Box>
        <Text paddingLeft="3px" fontWeight="bold" marginRight="auto">
          {title}
        </Text>
      </Button>
      <Box marginY="5" marginX="10" height="2px" background="brand.600" />
    </>
  );
};
export const TopBar = ({ title, children }: TopBarProps) => {
  const navigate = useNavigate();
  const { colorMode, toggleColorMode } = useColorMode();
  const { session } = useServiceContext();
  const { clearToken } = useSessionService();
  const backColor = useColorModeValue('back.100', 'back.800');
  const drawerDisclose = useDisclosure();
  const onChangeTheme = () => {
    drawerDisclose.onOpen();
  };
  const onSignIn = (): void => {
    clearToken();
    requestSignIn();
  };
  const onSignUp = (): void => {
    clearToken();
    requestSignUp();
  };
  const onSignOut = (): void => {
    clearToken();
    requestSignOut();
  };
  const onKarso = (): void => {
    requestOpenSite();
  };
  return (
    <Flex
      position="absolute"
      top={0}
      left={0}
      right={0}
      height={TOP_BAR_HEIGHT}
      alignItems="center"
      justifyContent="space-between"
      backgroundColor={backColor}
      gap="2"
      px="2"
      boxShadow={'0px 2px 4px ' + colors.back[900]}
      zIndex={200}
    >
      {session?.isConnected ?
      <Button {...BUTTON_TOP_BAR_PROPERTY} onClick={onChangeTheme}>
        <HStack>
          <LuAlignJustify />
          <Text paddingLeft="3px" fontWeight="bold">
            {environment.applName}
          </Text>
        </HStack>
      </Button>
      
      :(
        <HStack {...BUTTON_TOP_BAR_PROPERTY} >
              <LuAlignJustify />
              <Span paddingLeft="3px" fontWeight="bold">{environment.applName}</Span>
            </HStack>)
      }
      {title && (
        <Text
          fontSize="20px"
          fontWeight="bold"
          textTransform="uppercase"
          marginRight="auto"
          userSelect="none"
          color="brand.500"
        >
          {title}
        </Text>
      )}
      {children}
      <Flex right="0">
        {!session?.isConnected && (
          <>
            <Button {...BUTTON_TOP_BAR_PROPERTY} onClick={onSignIn}>
              <LuLogIn />
              <Text paddingLeft="3px" fontWeight="bold">
                Sign-in
              </Text>
            </Button>
            <Button
              {...BUTTON_TOP_BAR_PROPERTY}
              onClick={onSignUp}
              disabled={true}
            >
              <MdMore />
              <Text paddingLeft="3px" fontWeight="bold">
                Sign-up
              </Text>
            </Button>
          </>
        )}
        {session?.isConnected && (
          <MenuRoot>
            <MenuTrigger asChild>
              <IconButton {...BUTTON_TOP_BAR_PROPERTY} width={TOP_BAR_HEIGHT}>
                <LuCircleUserRound />
              </IconButton>
            </MenuTrigger>
            <MenuContent>
              <MenuItem
                value="user"
                valueText="user"
                color={useColorModeValue('brand.800', 'brand.200')}
              >
                <MdSupervisedUserCircle />
                <Box flex="1">Sign in as {session?.login ?? 'Fail'}</Box>
              </MenuItem>
              <MenuItem
                value="Settings"
                valueText="Settings"
                onClick={() => navigate('/settings')}
              >
                <LuSettings />
                Settings
              </MenuItem>
              <MenuItem
                value="Help"
                valueText="Help"
                onClick={() => navigate('/help')}
              >
                <MdHelp /> Help
              </MenuItem>
              <MenuItem
                value="Sign-out"
                valueText="Sign-out"
                onClick={onSignOut}
              >
                <LuLogOut /> Sign-out
              </MenuItem>
              <MenuItem value="karso" valueText="Karso" onClick={onKarso}>
                <LuKeySquare /> Karso (SSO)
              </MenuItem>
              {colorMode === 'light' ? (
                <MenuItem
                  value="set-dark"
                  valueText="set-dark"
                  onClick={toggleColorMode}
                >
                  <LuMoon /> Set dark mode
                </MenuItem>
              ) : (
                <MenuItem
                  value="set-light"
                  valueText="set-light"
                  onClick={toggleColorMode}
                >
                  <LuSun /> Set light mode
                </MenuItem>
              )}
            </MenuContent>
          </MenuRoot>
        )}
      </Flex>
      {session?.isConnected &&
      <DrawerRoot
        placement="start"
        onOpenChange={drawerDisclose.onClose}
        open={drawerDisclose.open}
        data-testid="top-bar_drawer-root"
      >
        <DrawerContent data-testid="top-bar_drawer-content">
          <DrawerHeader
            paddingY="auto"
            as="button"
            onClick={drawerDisclose.onClose}
            boxShadow={'0px 2px 4px ' + colors.back[900]}
            backgroundColor={backColor}
            color={useColorModeValue('brand.900', 'brand.50')}
            textTransform="uppercase"
          >
            <HStack {...BUTTON_TOP_BAR_PROPERTY} cursor="pointer">
              <LuArrowBigLeft />
              <Span paddingLeft="3px">{environment.applName}</Span>
            </HStack>
          </DrawerHeader>
          <DrawerBody paddingX="0px">
            <Box marginY="3" />
            <ButtonMenuLeft
              onClickEnd={drawerDisclose.onClose}
              dest="/"
              title="Home"
              icon={<MdHome />}
            />
            <ButtonMenuLeft
              onClickEnd={drawerDisclose.onClose}
              dest="/on-air"
              title="On air"
              icon={<MdOutlinePlaylistPlay />}
            />
            <ButtonMenuLeft
              onClickEnd={drawerDisclose.onClose}
              dest="/add"
              title="Add Media"
              icon={<MdOutlineUploadFile />}
            />
          </DrawerBody>
        </DrawerContent>
      </DrawerRoot>
      }
    </Flex>
  );
};