import React, { useState, useEffect } from 'react';
import axios from "axios";
import { errorToast } from "../common/errorHelpers";
import {Button, Select, TextInput} from "react-materialize";

const ChipSelection = (props) => {
  const [chips, setChips] = useState([]);
  const [selectedChip, setSelectedChip] = useState('1');
  const [chipScale, setChipScale] = useState('2');

  useEffect(() => {
    (async() => {
      try {
        const response = await axios.get(`/api/chips`);
        if (response.status === 200 && response.data){
          setChips(response.data);
        }else{
          errorToast();
        }
      } catch (e) {
        errorToast();
      }
    })();
  }, []);

  const chipsToOptions = chips.map( (chip, index) => <option key={index} value={chip.id}>{`${chip.code} • ${chip.name}`}</option>);

  const disableSubmit = () => {
    return !((parseInt(selectedChip) > 0) && (parseInt(chipScale) > 0));
  }

  const handleSubmit = async () => {
    const chipData = chips.find(chip => chip.id === parseInt(selectedChip));
    if (chipData){
      const originalGangsta = {
        chip_name: chipData.name,
        chip_code: chipData.code,
        chip_symbol: chipData.symbol,
        chip_prefixed: chipData.prefixed,
        chip_scale: parseInt(chipScale)
      }

      try{
        const response = await axios.put('/api/original_gangstas/0', { 'original_gangsta': originalGangsta });
        if (response.status === 200 && response.data && response.data.onboarded) {
          window.location.reload();
        }else{
          errorToast();
        }
      }catch (e) {
        errorToast();
      }
    }else{
      errorToast();
    }
  }

  return (
    <div className='container'>
      <Select value={selectedChip} onChange={(e) => setSelectedChip(e.target.value)} name="selected-chip">
        { chipsToOptions }
      </Select>

      <TextInput
        id='chipScale'
        label="Chip scale"
        value={chipScale}
        type='number'
        onChange={(e) => setChipScale(e.target.value)}
      />

      <Button disabled={disableSubmit()} waves="light" onClick={handleSubmit}>
        Do It
      </Button>
    </div>
  )
}

export default ChipSelection;