import React, { FunctionComponent, useEffect, useState } from 'react';
import {
  ButtonColor,
  ButtoniconTypeDesign,
  ButtonTypeDesign,
  CustomColor,
  IconAlign,
} from 'native/atoms/Buttons/ButtonProps';
import { AtomButtonOutline } from 'native/atoms/Buttons/Outline';
import { ContainerButton, StyledButtonGroup } from './styles';
import { AtomButtonDefault } from 'native/atoms/Buttons/Default';
import { AtomButtonGhost } from 'native/atoms/Buttons/Ghost';
import { AtomButtonIcon } from 'native/atoms/Buttons/Icon';

export interface IButtonGroupProps {
  /* data that will populate the button group */
  data: IItemProps[];
  /* indicates how to display the buttons */
  directionFlex: 'column' | 'row';
  /* indicates if the buttons will work normal or as toggle buttons */
  groupStyle?: 'normal' | 'toggle';
  /* button width*/
  width?: string;
}
interface IItemProps {
  /* unique value of each element */
  id: number;
  /* Label that the button displays */
  text: string;
  /* wheter is the button disabled or not */
  disabled: boolean;
  /* function that will trigger on pressing the button, if toggle, button will be marked as selected */
  onPress?: (e?: any) => void;
  /* color of the button, if toggle primary is defaulted */
  color: ButtonColor;
  /* type of button, if toggle, outline is defaulted */
  type: ButtonTypeDesign;
  /* if color is selected as custom, then we apply other color to button. If toggle, primary is defaulted */
  customColor?: CustomColor;
  /* icon that will show the button */
  icon?: string;
  /* disposition of the icon on the button */
  iconAlign?: IconAlign;
  /* type of the icon */
  typeButtonIcon?: ButtoniconTypeDesign;
  /* indicates in the case of group buttons if the will work normal or as toggle buttons */
  groupStyle?: 'normal' | 'toggle';
  /* in case that the buttons is used as toggle, indicate which button is selected */
  selected?: boolean;
}

const Button = ({
  disabled,
  onPress,
  color,
  text,
  type,
  customColor,
  icon = '',
  iconAlign,
  typeButtonIcon,
  selected = false,
  groupStyle = 'normal',
}: IItemProps) => {
  switch (type) {
    case 'outline':
      if (groupStyle == 'normal') {
        return (
          <AtomButtonOutline
            disabled={disabled}
            onPress={onPress}
            color={color}
            text={text}
            customColor={customColor}
            width={'100%'}
          />
        );
      } else {
        return (
          <AtomButtonOutline
            disabled={disabled}
            onPress={onPress}
            color={'primary'}
            text={text}
            width={'auto'}
            selected={selected}
            groupStyle={groupStyle}
          />
        );
      }
    case 'default':
      return (
        <AtomButtonDefault
          disabled={disabled}
          onPress={onPress}
          color={color}
          text={text}
          customColor={customColor}
          width={'100%'}
        />
      );
    case 'ghost':
      return (
        <AtomButtonGhost
          disabled={disabled}
          onPress={onPress}
          color={color}
          text={text}
          customColor={customColor}
          width={'100%'}
        />
      );
    case 'icon':
      return (
        <AtomButtonIcon
          disabled={disabled}
          onPress={onPress}
          color={color}
          text={text}
          customColor={customColor}
          icon={icon}
          iconAlign={iconAlign}
          width={'100%'}
          typeButtonIcon={typeButtonIcon ?? 'default'}
        />
      );
  }
};

export const MoleculeButtonGroup: FunctionComponent<IButtonGroupProps> = ({
  data,
  directionFlex,
  groupStyle = 'normal',
  width,
}) => {
  const [array, setArray] = useState(
    data.map((item) => {
      return {
        ...item,
        select: false,
      };
    })
  );
  useEffect(() => {
    setArray(
      data.map((item) => {
        return {
          ...item,
          select: false,
        };
      })
    );
  }, [data]);

  const handleToggle = (item: any) => {
    data.forEach((button) => {
      button.selected = false;
    });
    let [selectedButton] = data.filter((button) => button.id === item.id);
    selectedButton.selected = true;
    setArray(
      data.map((item) => {
        return {
          ...item,
          select: false,
        };
      })
    );
    item.onPress(item);
  };

  useEffect(() => {
    array.forEach(item => {
      item.selected && item.onPress && item.onPress(item);
    });
  }, [array]);

  return (
    <StyledButtonGroup directionFlex={directionFlex}>
      {array.map((item: IItemProps, index) => {
        return (
          <ContainerButton
            key={`${item.text}${index}`}
            nElements={array.length}>
            <Button
              id={item.id}
              disabled={item.disabled}
              onPress={
                groupStyle === 'toggle'
                  ? () => handleToggle(item)
                  : item.onPress
              }
              color={item.color}
              text={item.text}
              customColor={item.customColor}
              type={groupStyle === 'toggle' ? 'outline' : item.type}
              icon={item.icon}
              iconAlign={item.iconAlign}
              typeButtonIcon={item.typeButtonIcon}
              groupStyle={groupStyle}
              selected={item.selected}
            />
          </ContainerButton>
        );
      })}
    </StyledButtonGroup>
  );
};
