import React from 'react';
import { Tooltip, Zoom } from '@mui/material';

import './Pokemon.css';
import * as pokeTypeAsset from './assets';
import { colorTypeGradients } from './utils';

export interface PokemonProps {
  name: string;
  number: number;
  image: string;
  types: string[];
}

export function formatNumber(num: number) {
  return '#' + num.toString().padStart(3, '0');
}

function findPokeTypeAsset(pokeType: string) {
  switch (pokeType) {
    case 'normal':
      return pokeTypeAsset.pokeType_normal;
    case 'fire':
      return pokeTypeAsset.pokeType_fire;
    case 'water':
      return pokeTypeAsset.pokeType_water;
    case 'electric':
      return pokeTypeAsset.pokeType_electric;
    case 'grass':
      return pokeTypeAsset.pokeType_grass;
    case 'ice':
      return pokeTypeAsset.pokeType_ice;
    case 'fighting':
      return pokeTypeAsset.pokeType_fighting;
    case 'poison':
      return pokeTypeAsset.pokeType_poison;
    case 'ground':
      return pokeTypeAsset.pokeType_ground;
    case 'flying':
      return pokeTypeAsset.pokeType_flying;
    case 'psychic':
      return pokeTypeAsset.pokeType_psychic;
    case 'bug':
      return pokeTypeAsset.pokeType_bug;
    case 'rock':
      return pokeTypeAsset.pokeType_rock;
    case 'ghost':
      return pokeTypeAsset.pokeType_ghost;
    case 'dragon':
      return pokeTypeAsset.pokeType_dragon;
    case 'dark':
      return pokeTypeAsset.pokeType_dark;
    case 'steel':
      return pokeTypeAsset.pokeType_steel;
    case 'fairy':
      return pokeTypeAsset.pokeType_fairy;
    default:
      return pokeTypeAsset.pokeType_normal;
  }
}

export default function Pokemon({ name, number, image, types }: PokemonProps) {
  let finalColor;

  if (types.length === 2) {
    finalColor = colorTypeGradients(types[0], types[1], types.length);
  } else {
    finalColor = colorTypeGradients(types[0], types[0], types.length);
  }

  return (
    <div
      className="thumbnail__container"
      style={{
        background: `linear-gradient(${finalColor[0]}, ${finalColor[1]})`,
      }}
    >
      <div className="card__header">
        <div className="poke__number">{formatNumber(number)}</div>
        <div className="info__icon">
          <svg
            stroke="currentColor"
            fill="currentColor"
            strokeWidth="0"
            viewBox="0 0 512 512"
            height="1em"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path>
          </svg>
        </div>
      </div>
      <div className="image__container">
        <img src={image} alt={name} height={150} />
      </div>
      <div className="poke__name">
        <h3>{name}</h3>
        <div className="poke__type">
          {types.map(type => (
            <Tooltip title={type} key={type} TransitionComponent={Zoom} arrow>
              <div className={`poke__type__bg ${type}`}>
                <img src={findPokeTypeAsset(type)} alt={type} />
              </div>
            </Tooltip>
          ))}
        </div>
      </div>
    </div>
  );
}