import React, { useState } from 'react';
import { HomeProps } from '../../../model/components/home';
import { Ring } from '../../../model/rings';
import RingDescription from './RingDescription';
import RingItem from './RingItem';

const Rings: React.FC<HomeProps> = ({ rings, user }) => {
  const [show, setShowDescription] = useState<string>('hidden');
  const [currentRing, setRing] = useState<Ring>(rings[0]);

  const showDescription = (e: React.MouseEvent, ring: Ring): void => {
    e.preventDefault();
    setRing(ring);
    setShowDescription('show');
  };

  const hideDescription = (e: React.MouseEvent): void => {
    e.preventDefault();
    setShowDescription('hidden');
  };

  return (
    <article className="rings">
      <div className="ringsPosition">
        <RingItem
          ring={rings[0]}
          onMouseEnter={showDescription}
          onMouseLeave={hideDescription}
        />
        <RingItem
          ring={rings[1]}
          onMouseEnter={showDescription}
          onMouseLeave={hideDescription}
        />
        <RingItem
          ring={rings[2]}
          onMouseEnter={showDescription}
          onMouseLeave={hideDescription}
        />
        <RingItem
          ring={rings[3]}
          onMouseEnter={showDescription}
          onMouseLeave={hideDescription}
        />
        <RingItem
          ring={rings[4]}
          onMouseEnter={showDescription}
          onMouseLeave={hideDescription}
        />
      </div>
      <RingDescription ring={currentRing} user={user} show={show} />
    </article>
  );
};

export default Rings;