import React from 'react';
import { Col, Container, Row, StyleSystemThemedProps } from 'components/layout';
import { ChevronLeft } from 'icons';
import { Button } from 'components/button';
import { Divider } from 'components/divider';
import { useResponsiveLayout, useRouting } from 'hooks';
import { Chip } from 'components/chip';
import { Visible } from 'components/visible';
import { metrics } from 'config';

const { STYLES } = metrics;

export const BackHeader: React.FC<BackHeaderType> = ({
  onPress,
  badge,
  action,
  isDivider = true,
  leftElement,
  backElement,
  centerElement,
  unRead,
  rightElement,
  isBack,
  isAction,
  isPopUp,
  ...props
}) => {
  const { navigateBack } = useRouting();
  const { isDesktop } = useResponsiveLayout();

  const goBack = () => {
    navigateBack();
  };

  const isOnDesktop = isDesktop ? false : isBack;
  const showBack = isPopUp ? true : isOnDesktop;
  const backButtonSize = isPopUp ? 30 : 45;
  const isUnRead = !!unRead && unRead > 0;

  return (
    <Col height={STYLES.headerHeight}>
      <Row height={STYLES.headerHeight} flexGrow={1} alignItems="center" {...props}>
        {backElement || (
          <Visible if={showBack}>
            <Row flexWrap="wrap" alignItems="center" justifyContent="space-between">
              <Row alignItems="center">
                <Button
                  onPress={goBack}
                  width={backButtonSize}
                  shapeVariant="round"
                  mx="3xs"
                  height={backButtonSize}
                  maxWidth={backButtonSize}
                  minWidth={backButtonSize}
                  centerElement={
                    <>
                      <Container>
                        <ChevronLeft colorVariant="title" />
                        <Visible if={isUnRead}>
                          <Chip
                            position="absolute"
                            top={-10}
                            left={10}
                            height={16}
                            width={20}
                            title={12}
                            titleColor="white"
                            variant="plain"
                            colorVariant="secondary"
                          />
                        </Visible>
                      </Container>
                    </>
                  }
                />
              </Row>
            </Row>
          </Visible>
        )}
        <Row alignItems="center" justifyContent="space-between" flexGrow={1}>
          <Container>{leftElement}</Container>
          <Container>{centerElement}</Container>
          <Container>{rightElement}</Container>
        </Row>
      </Row>
      <Visible if={isDivider}>
        <Divider size={1} directionVariant="horizontal" colorVariant="divider-02" />
      </Visible>
    </Col>
  );
};
type BackHeaderType = StyleSystemThemedProps & BackHeaderProps;
export interface BackHeaderProps {
  isBack?: boolean;
  isPopUp?: boolean;
  leftElement: JSX.Element;
  backElement?: JSX.Element;
  centerElement?: JSX.Element;
  unRead?: number;
  rightElement?: JSX.Element;
  isDivider?: boolean;
  isAction?: boolean;
  action?: JSX.Element;
  onPress?: () => void;
  badge?: string | number;
}