import { Skeleton } from '@material-ui/lab';
import { fetchSkill } from 'actions/gameData';
import cn from 'classnames';
import SkillTooltip from 'components/Skill/SkillTooltip';
import { pathOr } from 'ramda';
import React, { Component } from 'react';
import {
  bool,
  func,
  number,
  string,
} from 'react-proptypes';
import { connect } from 'react-redux';
import { getPointReq } from 'utils/skills';

class Skill extends Component {
  static propTypes = {
    id: number.isRequired,
    learned: bool,
    spentPoints: number,
    remainingPoints: number,
    onClick: func,
    noRequirement: bool,
    disableTooltip: bool,
    ancestral: bool,
    className: string,
    icon: string,
    requiredLevel: number,
    passive: bool,
  };

  static defaultProps = {
    learned: false,
    spentPoints: 0,
    remainingPoints: 0,
    onClick: () => {
    },
    noRequirement: false,
    disableTooltip: false,
    ancestral: false,
  };

  componentDidMount() {
    fetchSkill(this.props.id);
  }

  render() {
    const { spentPoints, onClick, learned, remainingPoints, noRequirement, className, disableTooltip, ancestral } = this.props;
    const { id, icon, requiredLevel, passive } = this.props;
    const pointsRequired = passive ? requiredLevel : getPointReq(requiredLevel);
    const disabled = passive ? !learned
      : !learned && !ancestral && (spentPoints < pointsRequired || remainingPoints === 0);

    if (!icon) {
      return (
        <span className={cn('skill', className)}>
          <Skeleton
            variant="rect"
            width="100%"
            height="100%"
          />
        </span>
      );
    }

    return (
      <SkillTooltip
        skillId={id}
        disabled={disabled && spentPoints < pointsRequired}
        spentPoints={spentPoints}
        disableTooltip={disableTooltip}
      >
        <span
          className={cn('skill', className, { disabled, 'available': !disabled && !learned, ancestral })}
          onClick={disabled ? null : onClick}
          data-points-req={ancestral || learned || noRequirement || spentPoints >= pointsRequired ? 0 : pointsRequired}
        >
          <img src={`/images/icon/${icon}.png`} alt="" />
        </span>
      </SkillTooltip>
    );
  }
}

const mapStateToProps = ({ gameData: { skills } }, { id }) => ({
  ...pathOr({}, [id])(skills),
});

export default connect(mapStateToProps, null)(Skill);