import { FC, useCallback } from 'react';
import { BackHeader } from 'components/back-header';
import { Fab } from 'components/fab';
import { Container, Row, StyleSystemThemedProps } from 'components/layout';
import { User } from 'components/room/header/user';
import { Text, Button, Visible } from 'components';
import { useResponsiveLayout, useRouting } from 'hooks';
import {
  MicOff,
  Screen,
  VideoCameraOff,
  PhoneCall,
  SettingsFill,
  CloseThick,
  ChevronLeft,
} from 'icons';
import { Chip } from 'components/chip';
import { Divider } from 'components/divider';
import { SideBarOpen } from 'icons/SideBarOpen';
import { Action } from '../action';

export const TopBar: FC<TopBarType> = ({ isPopUp, ...props }) => {
  const { isMobile, isTabletSM } = useResponsiveLayout();

  const { navigateBack } = useRouting();
  const unRead = 4;
  const isSmall = isMobile || isTabletSM || isPopUp;

  const goBack = useCallback(() => {
    navigateBack();
  }, [navigateBack]);

  const borderRadius = isPopUp ? 10 : 0;
  const actionBackground = isPopUp ? 'base-01' : 'base';
  const isUnRead = !!unRead && unRead > 0;

  return (
    <Container
      backgroundColor="primary"
      position="absolute"
      zIndex={10}
      left={0}
      right={0}
      top={0}
      bottom={0}
      borderTopRightRadius={borderRadius}
      borderTopLeftRadius={borderRadius}
      {...props}
    >
      <BackHeader
        backElement={
          <Visible if={isSmall}>
            <Row flexWrap="wrap" alignItems="center" justifyContent="space-between">
              <Row alignItems="center">
                <Button
                  onPress={goBack}
                  width={30}
                  shapeVariant="square"
                  px="xs"
                  height={55}
                  maxWidth={50}
                  minWidth={50}
                  centerElement={
                    <>
                      <Container>
                        <ChevronLeft />
                        <Visible if={isUnRead}>
                          <Chip
                            position="absolute"
                            top={-10}
                            left={10}
                            height={16}
                            width={20}
                            title={12}
                            titleColor="white"
                            variant="plain"
                            colorVariant="secondary"
                          />
                        </Visible>
                      </Container>
                    </>
                  }
                />
                <Visible if={!isPopUp}>
                  <Divider
                    size={1}
                    directionVariant="vertical"
                    height={50}
                    colorVariant="divider-02"
                  />
                </Visible>
              </Row>
            </Row>
          </Visible>
        }
        isDivider={false}
        leftElement={
          <Row ml="xs" alignItems="center">
            <Visible if={!isSmall}>
              <Fab
                colorVariant="primary"
                variant="plain"
                shapeVariant="round"
                sizeVariant="medium"
                centerElement={<SideBarOpen colorVariant="white" />}
              />
            </Visible>
            <User
              isDivider={false}
              isCaption={false}
              caption="2:44"
              user={{
                username: 'Muhammad',
                profilePhoto: 'https://avatars.githubusercontent.com/u/98377997',
              }}
            />
          </Row>
        }
        centerElement={
          <Visible if={!isSmall}>
            <Row alignItems="center">
              <Fab
                onPress={() => {}}
                variant="plain"
                mx="2xs"
                sizeVariant="large"
                colorVariant="primary"
                hoverColorVariant="primary-hover"
                centerElement={<VideoCameraOff />}
              />
              <Fab
                onPress={() => {}}
                variant="plain"
                mx="2xs"
                sizeVariant="large"
                colorVariant="transparent"
                hoverColorVariant="primary-hover"
                centerElement={<MicOff />}
              />
              <Text mx="xl" variant="body" color="white">
                3:23
              </Text>

              <Fab
                onPress={() => {}}
                variant="plain"
                mx="2xs"
                sizeVariant="large"
                colorVariant="transparent"
                centerElement={<PhoneCall />}
              />
              <Fab
                onPress={() => {}}
                variant="plain"
                mx="2xs"
                sizeVariant="large"
                colorVariant="transparent"
                centerElement={<Screen />}
              />
            </Row>
          </Visible>
        }
        rightElement={
          <>
            <Visible if={isSmall}>
              <Fab
                onPress={() => {}}
                variant="plain"
                mx="xs"
                sizeVariant="large"
                colorVariant="transparent"
                centerElement={<CloseThick />}
              />
            </Visible>
            <Visible if={!isSmall}>
              <Fab
                onPress={() => {}}
                variant="plain"
                mx="xs"
                sizeVariant="large"
                colorVariant="transparent"
                centerElement={<SettingsFill />}
              />
            </Visible>
          </>
        }
      />
      <Visible if={isSmall}>
        <Action
          backgroundColor={actionBackground}
          py="2xs"
          alignItems="center"
          justifyContent="center"
        />
      </Visible>
    </Container>
  );
};
type TopBarType = StyleSystemThemedProps & TopBarProps;
export interface TopBarProps {
  isPopUp: boolean;
}