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

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;
  styles?: CSSObject;
}

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

  useEffect(() => {
    Math.sign(actualPoints) === -1
      ? setActualPointsState(0)
      : setActualPointsState(actualPoints);
  }, [actualPoints]);

  useEffect(() => {
    Math.sign(nextPoints) === -1
      ? setNextPointsState(0)
      : setNextPointsState(nextPoints);
  }, [nextPoints]);

  return (
    <Tier onClick={handleClick} style={styles}>
      <TierPointsContainer>
        <TierPointsNumber>
          <AtomIcon icon='points' size={13} color={'secondary'} />
          <AtomCaption size='xlarge' text={`${actualPointsState}pts`} />
        </TierPointsNumber>
        {type === 'desktop' && (
          <AtomIcon icon='keyboard_arrow_right' size={10} />
        )}
      </TierPointsContainer>
      {type === 'desktop' && (
        <>
          <TierProgressContainer>
            <AtomProgressBar
              percentage={!isNaN(progressValue) ? progressValue : 100}
              colorPoints={colorProgress}
            />
          </TierProgressContainer>
          <TierCategoryContainer
            align={nextPointsState === 0 ? 'center' : 'space-between'}
          >
            <TierCategoryName>
              <AtomIcon icon={iconName} size={15} />
              <AtomCaption size='medium' text={actualTier} />
            </TierCategoryName>
            {nextPointsState !== 0 && (
              <TierCategoryRest>
                <AtomBody size='small' weight='bold' text={nextPointsState.toString()} />
                <AtomBody
                  size='small'
                  text={nextTier}
                  weight='regular'
                  styles={{marginLeft: '3%'}}
                />
              </TierCategoryRest>
            )}
          </TierCategoryContainer>
        </>
      )}
    </Tier>
  );
};
