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

export interface IOptionsItemSelectorProps {
  name: string;
  description?: string;
  imageKey: string;
}

export interface IItemSelectorProps {
  atlasJSON: any;
  atlasIMG: any;
  options: IOptionsItemSelectorProps[];
  onClose: () => void;
  onSelect: (value: string) => void;
}

export const ItemSelector: React.FC<IItemSelectorProps> = ({
  atlasIMG,
  atlasJSON,
  options,
  onClose,
  onSelect,
}) => {
  const [selectedValue, setSelectedValue] = useState<string>();

  const handleClick = () => {
    let element = document.querySelector(
      `input[name='test']:checked`
    ) as HTMLInputElement;
    const elementValue = element.value;
    setSelectedValue(elementValue);
  };

  useEffect(() => {
    if (selectedValue) {
      onSelect(selectedValue);
    }
  }, [selectedValue]);
  return (
    <DraggableContainer
      type={RPGUIContainerTypes.Framed}
      width="500px"
      cancelDrag=".equipment-container-body .arrow-selector"
      onCloseButton={() => {
        if (onClose) {
          onClose();
        }
      }}
    >
      <div style={{ width: '100%' }}>
        <Title>{'Harvesting instruments'}</Title>
        <Subtitle>{'Use the tool, you need it'}</Subtitle>
        <hr className="golden" />
      </div>

      <RadioInputScroller>
        {options?.map((option, index) => (
          <RadioOptionsWrapper key={index}>
            <SpriteAtlasWrapper>
              <SpriteFromAtlas
                atlasIMG={atlasIMG}
                atlasJSON={atlasJSON}
                spriteKey={option.imageKey}
                imgScale={3}
              />
            </SpriteAtlasWrapper>
            <div>
              <input
                className="rpgui-radio"
                type="radio"
                value={option.name}
                name="test"
              />
              <label
                onPointerDown={handleClick}
                style={{ display: 'flex', alignItems: 'center' }}
              >
                {option.name} <br />
                {option.description}
              </label>
            </div>
          </RadioOptionsWrapper>
        ))}
      </RadioInputScroller>
      <ButtonWrapper>
        <Button buttonType={ButtonTypes.RPGUIButton} onPointerDown={onClose}>
          Cancel
        </Button>
        <Button buttonType={ButtonTypes.RPGUIButton}>Select</Button>
      </ButtonWrapper>
    </DraggableContainer>
  );
};

const Title = styled.h1`
  font-size: 0.6rem;
  color: yellow !important;
`;
const Subtitle = styled.h1`
  font-size: 0.4rem;
  color: yellow !important;
`;

const RadioInputScroller = styled.div`
  padding-left: 15px;
  padding-top: 10px;
  width: 100%;
  margin-top: 1rem;
  align-items: center;
  margin-left: 20px;
  align-items: flex-start;
  overflow-y: scroll;
  height: 360px;
`;

const SpriteAtlasWrapper = styled.div`
  margin-right: 40px;
`;

const RadioOptionsWrapper = styled.div`
  display: flex;
  align-items: stretch;
  margin-bottom: 40px;
`;

const ButtonWrapper = styled.div`
  display: flex;
  justify-content: space-around;
  padding-top: 20px;
  width: 100%;
`;
