import { capitalize } from 'lodash';
import React from 'react';
import styled from 'styled-components';
import { uiColors } from '../../constants/uiColors';
import { Ellipsis } from '../shared/Ellipsis';

export interface IRadioProps {
  title: string;
  subtitle: string;
  instrument: string | null;
  setInstrument: (value: string) => void;
}

export const RadioButton: React.FC<IRadioProps> = ({
  title,
  subtitle,
  instrument,
  setInstrument,
}) => {
  const isRadioSelected = (value: string): boolean => instrument === value;

  const handleClick = (e: string): void => {
    setInstrument(e);
  };

  return (
    <ItemWrapper onPointerDown={() => handleClick(title)}>
      <ItemIconContainer>
        <SpriteContainer id="elemento-radio">
          <input
            type="radio"
            name="react-radio-btn"
            className="rpgui-radio"
            value={title}
            checked={isRadioSelected(title)}
            onChange={e => e}
          />
        </SpriteContainer>
      </ItemIconContainer>
      <ItemNameContainer>
        <NameValue onPointerDown={() => handleClick(title)}>
          <p>{title}</p>
          <p>
            <Ellipsis maxLines={1} maxWidth="250px">
              {capitalize(subtitle)}
            </Ellipsis>
          </p>
        </NameValue>
      </ItemNameContainer>
    </ItemWrapper>
  );
};

const ItemWrapper = styled.div`
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;

  &:hover {
    background-color: ${uiColors.darkGray};
  }
  padding: 0.5rem;
`;

const ItemNameContainer = styled.div`
  flex: 80%;
`;

const ItemIconContainer = styled.div`
  display: flex;
  justify-content: flex-start;
  align-items: center;

  flex: 0 0 58px;
`;

const SpriteContainer = styled.div`
  input {
    display: block !important;
    &:hover {
      cursor: pointer;
    }
  }
  position: relative;
  top: -0.5rem;
  left: 0.5rem;
`;

const NameValue = styled.div`
  p {
    font-size: 0.75rem;
    margin: 0;
  }
`;
