// 3rd party.
import classnames from 'classnames';
import React, {useEffect, useState} from 'react';
// 2nd party.
import {compose} from '@avocado/core';
import contempo from 'contempo';
// 1st party.
import ItemSlot from './item-slot';

const decorate = compose(
  contempo(`
.hotbar {
  position: absolute;
  width: 200px;
  height: 20px;
  left: 50%;
  top: 2px;
}
.hotbar-inner {
  transform: translateX(-50%);
  height: 100%;
}
.hotbar-key {
  color: white;
  text-shadow: 0.25px 0.25px 0 black;
  font-family: monospace;
  position: absolute;
  top: -0.5px;
  left: 0.5px;
  font-size: 3px;
  line-height: 4px;
}
.hotbar .item-slot.active {
  box-shadow:
    -.5px -.5px 0 rgba(0, 0, 0, 1),
    .5px .5px 0 rgba(0, 0, 0, 1),
    -.5px .5px 0 rgba(0, 0, 0, 1),
    .5px -.5px 0 rgba(0, 0, 0, 1),
    inset -.5px -.5px 0 rgba(255, 255, 0, 1),
    inset  .5px  .5px 0 rgba(255, 255, 0, 1),
    inset -.5px  .5px 0 rgba(255, 255, 0, 1),
    inset  .5px -.5px 0 rgba(255, 255, 0, 1)
  ;
}
.hotbar .item-slot.active:hover {
  box-shadow:
    -.5px -.5px 0 rgba(0, 0, 0, 1),
    .5px .5px 0 rgba(0, 0, 0, 1),
    -.5px .5px 0 rgba(0, 0, 0, 1),
    .5px -.5px 0 rgba(0, 0, 0, 1),
    -.5px -.5px 3px rgba(255, 255, 255, 1),
    .5px .5px 3px rgba(255, 255, 255, 1),
    -.5px .5px 3px rgba(255, 255, 255, 1),
    .5px -.5px 3px rgba(255, 255, 255, 1),
    inset -.5px -.5px 0 rgba(255, 255, 0, 1),
    inset  .5px  .5px 0 rgba(255, 255, 0, 1),
    inset -.5px  .5px 0 rgba(255, 255, 0, 1),
    inset  .5px -.5px 0 rgba(255, 255, 0, 1)
  ;
  transition: none;
}
  `),
);

const HotbarComponent = ({damageProton}) => {
  const [active, setActive] = useState(0);
  const hotkeyForSlot = (index) => {
    return index;
  }
  const slots = [];
  for (let i = 0; i < 10; ++i) {
    const slot = <ItemSlot
      className={classnames(
        active === i ? 'active' : '',
      )}
      key={i}
      onClick={(event) => {
        setActive(i);
        event.preventDefault();
        event.stopPropagation();
        return false;
      }}
    >
      <div className="hotbar-key">{hotkeyForSlot(i)}</div>
    </ItemSlot>;
    slots.push(slot);
  }
  return <div
    className="hotbar unselectable"
    onWheel={(event) => {
      if (event.deltaY > 0) {
        setActive((active + 1) % 10);
      }
      else if (event.deltaY < 0) {
        setActive((active + 9) % 10);
      }
    }}
  >
    <div className="hotbar-inner">
      {slots}
    </div>
  </div>;
}

export default decorate(HotbarComponent);