import React, { useState, useEffect } from 'react';
import { keysTheme } from 'data/dataMx';
import { AtomCaption } from 'native/atoms/Typography/Caption';
import { AtomIcon } from 'native/atoms/Icon';
import { AtomProgressBar } from 'native/atoms/ProgressBar';
import {
  Tier,
  TierPointsContainer,
  TierPointsNumber,
  TierProgressContainer,
  TierCategoryContainer,
  TierCategoryName,
  TierCategoryRest,
  WrapperLabel,
} from './styles';
import { ITierIcon } from './TierTypes';
import { CSSObject } from 'styled-components';
import { AtomSubtitle } from 'native/atoms/Typography/Subtitle';

export interface ITierLevelProps {
  /** Type of Tier */
  type: 'desktop' | 'mobile';
  /** Tier icon */
  iconName: ITierIcon;
  /** User points */
  actualPoints: number;
  /** User tier text */
  actualTier: string;
  /** Missing points to the user to reach gold */
  nextPoints: number;
  /** Text points to the user to reach gold */
  nextTier: string;
  /** ProgressBar color */
  colorProgress?: keysTheme;
  /** Handler for click event */
  handleClick?: () => void;
  style?: CSSObject;
}

export const OrganismsTierLevel = ({
  type,
  iconName,
  actualPoints,
  actualTier,
  nextPoints,
  nextTier,
  style,
  handleClick,
  colorProgress,
}: ITierLevelProps) => {
  const [actualPointsState, setActualPointsState] =
    useState<number>(actualPoints);
  const [nextPointsState, setNextPointsState] = useState<number>(nextPoints);
  const total = actualPointsState + nextPointsState;
  const progressValue = (actualPointsState * 100) / total;

  const dotInPoints = (points: number, setState: any): void => {
    if (points <= 0) setState(0);
    else {
      const res = new Intl.NumberFormat('de-DE');
      setState(res.format(points));
    }
  };

  useEffect(() => {
    dotInPoints(actualPoints, setActualPointsState);
  }, [actualPoints]);

  useEffect(() => {
      dotInPoints(nextPoints, setNextPointsState);
  }, [nextPoints]);

  return (
    <Tier onPress={handleClick} style={style}>
      <TierPointsContainer type={type}>
        <TierPointsNumber>
          <AtomIcon name='points' size={20} color={'secondary'} />
          <WrapperLabel>
            <AtomSubtitle weight='bold' size='xlarge' text={`${actualPointsState}`} />
            <AtomCaption size={'large'} text={'pts'}/>
          </WrapperLabel>
        </TierPointsNumber>
        {type === 'desktop' && (
          <AtomIcon name='keyboard_arrow_right' size={6} color='neutral600' />
        )}
      </TierPointsContainer>
      {type === 'desktop' && (
        <>
          <TierProgressContainer>
            <AtomProgressBar
              percentage={!isNaN(progressValue) ? progressValue : 100}
              height={'4px'}
              colorPoints={colorProgress}
            />
          </TierProgressContainer>
          <TierCategoryContainer
            align={nextPointsState == 0 ? 'center' : 'space-between'}
          >
            <TierCategoryName>
              <AtomIcon name={iconName} size={15} />
              <WrapperLabel>
                <AtomCaption size='medium' text={actualTier} />
              </WrapperLabel>
            </TierCategoryName>
            {nextPointsState != 0 && (
              <TierCategoryRest>
                <AtomCaption size='medium' text={nextTier && nextPointsState ? `${nextPointsState.toString()} to ${nextTier}` : ''} weight='medium' color='neutral600' />
              </TierCategoryRest>
            )}
          </TierCategoryContainer>
        </>
      )}
    </Tier>
  );
};
