import React, { useState } from 'react';
import styled from 'styled-components';
import { uiColors } from '../../constants/uiColors';
import { ProgressBar } from '../ProgressBar';
import Character from './Character.png';

export interface ICharacterStatusProps {
  healthValue: number;
  healthMaxValue: number;
  manaValue: number;
  manaMaxValue: number;
  charName: string;
}

export const CharacterStatus: React.FC<ICharacterStatusProps> = ({
  healthValue,
  healthMaxValue,
  manaValue,
  manaMaxValue,
  charName,
}) => {
  const [buff] = useState<Boolean>(false);
  return (
    <StatusContainer>
      <ImgContainer
        style={{
          background: `url(${Character})`,
          backgroundPositionX: 'center',
        }}
      />
      <StatusFlexContainer>
        <div>
          <CharNameContainer>{charName}</CharNameContainer>
          <ProgressContainer>
            <StyledProgressBar
              max={healthMaxValue}
              value={healthValue}
              color={'red'}
              minWidth={200}
            />
            <StyledProgressBar
              max={manaMaxValue}
              value={manaValue}
              color={'blue'}
              minWidth={200}
            />
          </ProgressContainer>
        </div>
        {buff && (
          <BuffCircleContainer>
            <BuffCircle />
            <BuffCircle />
            <BuffCircle />
            <BuffCircle />
            <BuffCircle />
            <BuffCircle />
            <BuffCircle />
            <BuffCircle />
            <BuffCircle />
            <BuffCircle />
          </BuffCircleContainer>
        )}
      </StatusFlexContainer>
    </StatusContainer>
  );
};

const CharNameContainer = styled.div`
  color: black;
  margin: auto;
  display: flex;
  justify-content: space-around;
  background-color: rgba(117, 113, 97, 0.3);
  align-items: center;
  height: 30px;
  border-radius: 10px;
`;

const StatusContainer = styled.div`
  display: flex;
  scale: 0.7;
`;

const ProgressContainer = styled.div`
  display: flex;
  flex-direction: row;
`;

const StyledProgressBar = styled(ProgressBar)`
  .rpgui-progress-left-edge,
  .rpgui-progress-right-edge {
    width: 20px;
  }
`;

const ImgContainer = styled.div`
  width: 4.3rem;
  height: 4.3rem;
  border: 2px solid ${uiColors.darkGray};
  border-radius: 50%;
  border-radius: 50%;
  margin-right: 8px;
`;

const BuffCircle = styled.div`
  width: 2rem;
  height: 2rem;
  background-color: ${uiColors.lightGray};
  border: 2px solid ${uiColors.darkGray};
  border-radius: 50%;
`;

const StatusFlexContainer = styled.div``;

const BuffCircleContainer = styled.div`
  display: flex;
  div {
    margin: 2px;
  }
`;
