import { useCallback } from 'react';
import { Row, StyleSystemThemedProps } from 'components/layout';
import { Archive, DoubleCheck, SearchIcon } from 'icons';
import { BackHeader } from 'components/back-header';
import { Button, Text, Visible } from 'components';
import { useResponsiveLayout, useSettings } from 'hooks';
import { Navigator } from 'components/top-bar';

export const Header: React.FC<HeaderType> = ({ ...props }) => {
  const { isChatPopUpOpen } = useSettings();
  const { isMobile } = useResponsiveLayout();
  const isSmall = isMobile;
  const leftElement = useCallback(() => {
    return (
      <Row alignItems="center">
        <Navigator />
        <Text ml="l" variant="title">
          Inbox
        </Text>
      </Row>
    );
  }, []);
  const rightElement = useCallback(() => {
    return (
      <>
        <Visible if={!isChatPopUpOpen}>
          <Row>
            <Button
              onPress={() => {}}
              variant="outline"
              borderColorVariant="base"
              sizeVariant="small"
              hoverColorVariant="base-02-hover"
              leftElement={<DoubleCheck colorVariant="body" />}
              title="Mark all as read"
              titleVariant="caption"
              titleColor="body"
            />

            <Button
              onPress={() => {}}
              variant="outline"
              borderColorVariant="base"
              sizeVariant="small"
              hoverColorVariant="base-02-hover"
              ml="xs"
              leftElement={<Archive colorVariant="body" />}
              title="Archive all notifications"
              titleVariant="caption"
              titleColor="body"
            />
            <Button
              onPress={() => {}}
              borderColorVariant="base"
              colorVariant="base"
              sizeVariant="small"
              hoverColorVariant="base-02-hover"
              ml="xs"
              width={104}
              leftElement={<SearchIcon colorVariant="caption-01" height={14} width={14} />}
              title="Search..."
              titleVariant="body"
              titleColor="caption-01"
            />
          </Row>
        </Visible>
      </>
    );
  }, [isChatPopUpOpen]);

  return (
    <BackHeader
      backgroundColor="base-01"
      isBack={true}
      px="xs"
      isDivider={isSmall}
      leftElement={leftElement()}
      rightElement={rightElement()}
      {...props}
    />
  );
};

type HeaderType = StyleSystemThemedProps;