import React, { forwardRef, useMemo } from 'react';

import { Pressable } from 'react-native';
import { Container, ContainerRef } from '@cleartrip/ct-design-container';
import { Typography, TypographyStyleConfigProps } from '@cleartrip/ct-design-typography';
import { useStyles } from '@cleartrip/ct-design-style-manager';
import { makeStyles } from '@cleartrip/ct-design-style-manager';
import EventCollectorProvider, { useMergeEvents } from '@cleartrip/ct-design-event-propagation';
import Conditional from '@cleartrip/ct-design-conditional-wrap';
import { Cross } from '@cleartrip/ct-design-icons';
import { getChipStyles, getLabelColor } from './style';
import { IChipProps } from './type';
import { Styles } from '@cleartrip/ct-design-types';
import { useTheme } from '@cleartrip/ct-design-theme';

const staticChipStyles = makeStyles((theme) => {
  return {
    relativeContainer: {
      position: 'relative',
    },
    root: {
      display: 'flex',
      alignSelf: 'baseline',
      flexDirection: 'row',
      alignItems: 'center',
      gap: theme?.spacing[2],
      paddingHorizontal: theme?.spacing[2],
    },
    prefixIconContainer: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    },
    suffixIconContainer: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    },
    topIconContainer: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    },
    chipCountRoot: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: theme?.color.chip.selectedPrimaryLabel,
      height: theme?.size[4],
      minWidth: theme?.size[4],
      borderRadius: 50,
      borderColor: '#fff',
      top: 1,
      borderWidth: theme?.border.width.sm,
      paddingHorizontal: theme?.spacing[1],
      marginLeft: -theme?.spacing[2],
    },
    labelContainerStyles: {
      paddingLeft: theme?.spacing[1],
      paddingRight: theme?.spacing[1],
    },
  };
});

const ChipCounter = ({
  count,
  styleConfig,
}: {
  count: number;
  styleConfig: {
    root: Styles[];
    typography: TypographyStyleConfigProps;
  };
}) => {
  const { root = [], typography = {} } = styleConfig || {};
  return (
    <Container
      styleConfig={{
        root: [staticChipStyles.chipCountRoot, ...root],
      }}
    >
      <Typography variant='TAG' color='neutral' styleConfig={typography}>
        {count}
      </Typography>
    </Container>
  );
};

const Chip = forwardRef(
  (
    {
      id,
      label,
      onClick,
      size = 'sm',
      labelVariant = 'B2',
      isSelected = false,
      disabled = false,
      prefixIcon,
      suffixIcon,
      topIcon,
      styleConfig,
      showCounter,
      count = 0,
      isDismissible = false,
      onDismiss,
    }: IChipProps,
    ref: React.ForwardedRef<ContainerRef>,
  ) => {
    const {
      relativeContainer: customRelativeContainerStyles = [],
      root: customRootStyles = [],
      labelContainer: customLabelContainerStyles = [],
      prefixIconContainer: customPrefixIconContainerStyles = [],
      suffixIconContainer: customSuffixIconContainerStyles = [],
      topIconContainer: customTopIconContainerStyles = [],
      counter: customChipCountRootStyles = [],
      counterTypography: customChipCountTypographyStyles = {},
    } = styleConfig || {};

    const theme = useTheme();

    const labelColor = useMemo(() => {
      return getLabelColor(disabled);
    }, [disabled]);

    const isTopIcon = Boolean(topIcon);

    const chipStyles = useStyles(
      (theme) => {
        return {
          root: getChipStyles({
            theme,
            size,
            isDisabled: disabled,
            isSelected,
            topIcon: isTopIcon,
          }),
        };
      },
      [size, isSelected, disabled, isTopIcon],
    );

    const chipStylesForTopIcon = useStyles(
      (theme) => {
        if (topIcon) {
          return {
            root: {
              flexDirection: 'column',
              alignItems: 'flex-start',
              gap: theme?.spacing[0],
              borderRadius: theme?.border.radius[16],
            },
          };
        }
        return {};
      },
      [topIcon],
    );

    const mergedEvents = useMergeEvents({ onClick: [onClick] });

    return (
      <Conditional
        condition={!!onClick}
        wrap={(children) => <EventCollectorProvider value={mergedEvents}>{children}</EventCollectorProvider>}
      >
        <Container
          styleConfig={{
            root: [staticChipStyles?.relativeContainer, ...customRelativeContainerStyles],
          }}
          id={id}
        >
          <Container
            ref={ref}
            onClick={onClick ? onClick : undefined}
            styleConfig={{
              root: [staticChipStyles?.root, chipStyles.root, chipStylesForTopIcon?.root, ...customRootStyles],
            }}
          >
            {!!topIcon && (
              <Container
                styleConfig={{
                  root: [staticChipStyles?.topIconContainer, ...customTopIconContainerStyles],
                }}
              >
                {topIcon}
              </Container>
            )}
            {!!prefixIcon && (
              <Container
                styleConfig={{
                  root: [staticChipStyles?.prefixIconContainer, ...customPrefixIconContainerStyles],
                }}
              >
                {prefixIcon}
              </Container>
            )}
            {!!label && (
              <Container
                styleConfig={{
                  root: [staticChipStyles?.labelContainerStyles, ...customLabelContainerStyles],
                }}
              >
                {typeof label === 'string' ? (
                  <Typography lineClamp={1} variant={labelVariant} color={labelColor}>
                    {label}
                  </Typography>
                ) : (
                  label
                )}
              </Container>
            )}
            {showCounter && !!count && (
              <ChipCounter
                count={count}
                styleConfig={{ root: customChipCountRootStyles, typography: customChipCountTypographyStyles }}
              />
            )}
            {!!suffixIcon && (
              <Container
                styleConfig={{
                  root: [staticChipStyles?.suffixIconContainer, ...customSuffixIconContainerStyles],
                }}
              >
                {suffixIcon}
              </Container>
            )}
            {isDismissible && (
              <Pressable
                onPress={() => {
                  onDismiss?.();
                }}
              >
                <Cross
                  height={16}
                  width={16}
                  crossColor={
                    isSelected ? theme.color.chip.selectedPrimaryLabel : theme.color.chip.nonSelectedPrimaryLabel
                  }
                />
              </Pressable>
            )}
          </Container>
        </Container>
      </Conditional>
    );
  },
);

Chip.displayName = 'Chip';

export default Chip;