import React, { useState } from 'react';
import styled from 'styled-components';
import { Button, ButtonTypes } from '../Button';
import { DraggableContainer } from '../DraggableContainer';
import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
import { RadioButton } from './RadioButton';

export interface IRadioItems {
  title: string;
  subtitle: string;
}
export interface IRadioInput {
  title: string;
  subtitle: string;
  onSelect: (a: string) => void;
  onCancel: () => void;
  items: IRadioItems[];
}

export const RadioInput: React.FC<IRadioInput> = ({
  title,
  subtitle,
  onSelect,
  onCancel,
  items,
}) => {
  const [instrument, setInstrument] = useState('');

  const confirHandler = () => {
    if (instrument) {
      onSelect(instrument);
    }
  };

  return (
    <DraggableContainer
      type={RPGUIContainerTypes.Framed}
      onCloseButton={() => {
        if (onCancel) onCancel();
      }}
      width="500px"
      cancelDrag=".equipment-container-body .arrow-selector"
    >
      <>
        <div style={{ width: '100%' }}>
          <Title>{title}</Title>
          <Subtitle>{subtitle}</Subtitle>
          <hr className="golden" />
        </div>
        <RadioInputScroller>
          {items.map((item, index) => (
            <RadioButton
              key={`${item.title}_${index}`}
              title={item.title}
              subtitle={item.subtitle}
              setInstrument={setInstrument}
              instrument={instrument}
            />
          ))}
        </RadioInputScroller>
        <ButtonWrapper>
          <Button
            buttonType={ButtonTypes.RPGUIButton}
            onPointerDown={() => onCancel()}
          >
            Cancel
          </Button>
          <Button
            buttonType={ButtonTypes.RPGUIButton}
            onPointerDown={confirHandler}
          >
            Select
          </Button>
        </ButtonWrapper>
      </>
    </DraggableContainer>
  );
};
const RadioInputScroller = styled.div`
  overflow-y: scroll;
  height: 390px;
  width: 100%;
  margin-top: 1rem;
`;

const Title = styled.h1`
  z-index: 22;
  font-size: 0.6rem;
  color: yellow !important;
`;
const Subtitle = styled.h1`
  z-index: 22;
  font-size: 0.4rem;
  color: yellow !important;
`;
const ButtonWrapper = styled.div`
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
  width: 100%;
  margin-top: 1rem;
`;
