import React from 'react';
import { TouchableOpacity } from 'react-native';
import { X, CaretLeft } from 'phosphor-react-native';
import { useTheme } from '../../theme/ThemeProvider';
import { CartButton } from '../CartButton';
import { TextFieldSearch } from '../TextFieldSearch';
import { Box } from '../Box';
import { Text } from '../Text';
import Header from './components/Header';
import { Normalize } from '../../utils/normalize';

export interface TopBarProgressStep {
  step: number;
  totalSteps: number;
}

export interface TopBarProps {
  showCart?: boolean;
  cartQuantity?: number;
  handleCart?: () => void;
  showBack?: boolean;
  handleBack?: () => void;
  showClose?: boolean;
  handleClose?: () => void;
  showSearch?: boolean;
  handleSearch?: () => void;
  showTitle?: boolean;
  title?: string;
  progressStep?: TopBarProgressStep;
  boldTitle?: boolean;
}

export const TopBar = ({
  showCart,
  cartQuantity,
  handleCart = () => console.warn('onPress is a required field'),
  showBack = false,
  handleBack = () => console.warn('onPress is a required field'),
  showClose,
  handleClose = () => console.warn('onPress is a required field'),
  showTitle,
  title,
  showSearch,
  handleSearch = () => console.warn('onPress is a required field'),
  progressStep,
  boldTitle = false,
}: TopBarProps) => {
  const { fonts, colors } = useTheme();
  const hasHeaderLeft = showBack;

  return (
    <Header progressStep={progressStep}>
      {hasHeaderLeft ? (
        <Header.Left>
          {showBack ? (
            <TouchableOpacity onPress={handleBack}>
              <CaretLeft size={24} color={colors.yankeesBlue} />
            </TouchableOpacity>
          ) : null}
        </Header.Left>
      ) : (
        <></>
      )}
      <Header.Body withBackButton={showBack}>
        {showTitle ? (
          <Text
            fontFamily={
              boldTitle ? fonts.caustenRoundBold : fonts.caustenRoundRegular
            }
            color="yankeesBlue"
            fontSize={Normalize(18)}
          >
            {title}
          </Text>
        ) : null}
        {showSearch ? <TextFieldSearch onChangeCancel={handleSearch} /> : null}
      </Header.Body>
      <Header.Right>
        {showCart ? (
          <CartButton quantity={cartQuantity} onPress={handleCart} />
        ) : null}
        {showClose ? (
          <Box paddingRight={'spacing-xs'}>
            <TouchableOpacity onPress={handleClose}>
              <X size={24} color={colors.yankeesBlue} />
            </TouchableOpacity>
          </Box>
        ) : null}
      </Header.Right>
    </Header>
  );
};