import React from 'react';

import { getCheer } from './sound';

import Icon from './Icon';

const COLUMNS = [1,2,3,4,5,6,7,8,9,10];
interface RowProps {
  stats: Stats;
  setStats: (s: Stats) => void;
  name: keyof Stats;
  emoji: string;
  sound: HTMLAudioElement;
}

const Row = ({stats, setStats, name, emoji, sound}: RowProps) => {
  const stat = stats[name];
  return <div className={`row ${name}`} onClick={() => {
    setStats({...stats, [name]: stat + 1 });
    sound.play();
    setTimeout(() => getCheer().play(), 1800)
  }}>
    {COLUMNS.map(i =>
      i <= stat ?
        <Icon key={i} emoji={emoji} className={name} />
        : <div key={i} className={`${name} cell`} />
    )}
    <div
      className="delete cell checked"
      onClick={e => {
        e.stopPropagation();
        setStats({...stats, [name]: Math.max(0, stat - 1)});
      }}
    >
        🚫
    </div>
  </div>
};

export default Row;