import {
  ISkill,
  ISkillDetails,
  getSPForLevel,
  getXPForLevel,
} from '@rpg-engine/shared';
import React from 'react';
import styled from 'styled-components';
import { uiColors } from '../constants/uiColors';
import { DraggableContainer } from './DraggableContainer';
import { SkillProgressBar } from './SkillProgressBar';

export interface ISkillContainerProps {
  skill: ISkill;
  onCloseButton: () => void;
  atlasJSON: any;
  atlasIMG: any;
  scale?: number;
}

const skillProps = {
  attributes: {
    color: uiColors.purple,
    values: {
      stamina: 'staffs/doom-staff.png',
      magic: 'helmets/yellow-enchanter-hat.png',
      magicResistance: 'gems/amethyst-gem.png',
      strength: 'crafting-resources/dragon-tooth.png',
      resistance: 'books/magic-orb.png',
      dexterity: 'boots/gaias-soleplate.png',
    },
  },
  combat: {
    color: uiColors.cardinal,
    values: {
      first: 'gloves/leather-gloves.png',
      club: 'maces/club.png',
      sword: 'swords/double-edged-sword.png',
      axe: 'axes/double-axe.png',
      distance: 'ranged-weapons/horse-bow.png',
      shielding: 'shields/studded-shield.png',
      dagger: 'daggers/dagger.png',
    },
  },
  crafting: {
    color: uiColors.blue,
    values: {
      fishing: 'foods/fish.png',
      farming: 'tools/watering-can.png',
      mining: 'crafting-resources/iron-ingot.png',
      lumberjacking: 'crafting-resources/greater-wooden-log.png',
      blacksmithing: 'hammers/hammer.png',
      cooking: 'foods/chickens-meat.png',
      alchemy: 'potions/greater-mana-potion.png',
    },
  },
};

interface SkillMap {
  [key: string]: string;
}

const skillNameMap: SkillMap = {
  stamina: 'Stamina',
  magic: 'Magic',
  magicResistance: 'Magic Resistance',
  strength: 'Strength',
  resistance: 'Resistance',
  dexterity: 'Dexterity',
  first: 'Fist',
  club: 'Club',
  sword: 'Sword',
  axe: 'Axe',
  distance: 'Distance',
  shielding: 'Shielding',
  dagger: 'Dagger',
  fishing: 'Fishing',
  farming: 'Farming',
  mining: 'Mining',
  lumberjacking: 'Lumberjacking',
  blacksmithing: 'Blacksmithing',
  cooking: 'Cooking',
  alchemy: 'Alchemy',
};

export const SkillsContainer: React.FC<ISkillContainerProps> = ({
  onCloseButton,
  skill,
  atlasIMG,
  atlasJSON,
  scale,
}) => {
  const onRenderSkillCategory = (
    category: 'attributes' | 'combat' | 'crafting'
  ) => {
    const skillCategory = skillProps[category];

    const skillCategoryColor = skillCategory.color;

    const output = [];

    for (const [key, value] of Object.entries(skillCategory.values)) {
      if (key === 'stamina') {
        continue;
      }
      //@ts-ignore
      const skillDetails = (skill[key] as unknown) as ISkillDetails;

      if (!skillDetails) {
        continue;
      }

      output.push(
        <SkillProgressBar
          key={key}
          skillName={skillNameMap[key]}
          bgColor={skillCategoryColor}
          level={skillDetails.level || 0}
          skillPoints={Math.round(skillDetails.skillPoints) || 0}
          skillPointsToNextLevel={
            Math.round(getSPForLevel(skillDetails.level + 1)) || 0
          }
          texturePath={value}
          atlasIMG={atlasIMG}
          atlasJSON={atlasJSON}
          buffAndDebuff={skillDetails.buffAndDebuff}
        />
      );
    }

    return output;
  };

  return (
    <SkillsDraggableContainer
      title="Skills"
      cancelDrag="#skillsDiv"
      scale={scale}
      width="100%"
    >
      {onCloseButton && (
        <CloseButton onPointerDown={onCloseButton}>X</CloseButton>
      )}
      <SkillsContainerDiv id="skillsDiv">
        <SkillSplitDiv>
          <p>General</p>
          <hr className="golden" />

          <SkillProgressBar
            skillName={'Level'}
            bgColor={uiColors.navyBlue}
            level={Math.round(skill.level) || 0}
            skillPoints={Math.round(skill.experience) || 0}
            skillPointsToNextLevel={
              Math.round(getXPForLevel(skill.level + 1)) || 0
            }
            texturePath={'swords/broad-sword.png'}
            atlasIMG={atlasIMG}
            atlasJSON={atlasJSON}
          />

          <p>Combat Skills</p>
          <hr className="golden" />
        </SkillSplitDiv>

        {onRenderSkillCategory('combat')}

        <SkillSplitDiv>
          <p>Crafting Skills</p>
          <hr className="golden" />
        </SkillSplitDiv>

        {onRenderSkillCategory('crafting')}

        <SkillSplitDiv>
          <p>Basic Attributes</p>
          <hr className="golden" />
        </SkillSplitDiv>

        {onRenderSkillCategory('attributes')}
      </SkillsContainerDiv>
    </SkillsDraggableContainer>
  );
};

const SkillsDraggableContainer = styled(DraggableContainer)`
  border: 1px solid black;

  max-width: 450px;

  height: 90%;
  .DraggableContainer__TitleContainer-sc-184mpyl-2 {
    width: auto;
    height: auto;
  }
`;

const SkillsContainerDiv = styled.div`
  width: 100%;
  -webkit-overflow-y: scroll;
  overflow-y: scroll;
  height: 90%;
  padding-right: 10px;
`;

const SkillSplitDiv = styled.div`
  width: 100%;
  font-size: 11px;
  hr {
    margin: 0;
    margin-bottom: 1rem;
    padding: 0px;
  }
  p {
    margin-bottom: 0px;
  }
`;

const CloseButton = styled.div`
  position: absolute;
  top: 2px;
  right: 2px;
  color: white;
  z-index: 22;
  font-size: 1.1rem;
`;
