import React, { useState, useEffect } from 'react';
import axios from "axios";
import { Table, Collapsible, CollapsibleItem, Button, TextInput, Row, Col, Select } from "react-materialize";
import M from "materialize-css";
import YesNoModal from "../common/YesNoModal";

const ListChips = (props) => {
  const [chipsList, setChipsList] = useState([]);
  const [chipValuePairs, setChipValuePairs] = useState([]);
  const [chipValueActiveIndex, setChipValueActiveIndex] = useState(undefined);
  const [editingChipValue, setEditingChipValue] = useState("");
  const [newChipValueSecondaryChipId, setNewChipValueSecondaryChipId] = useState("");

  const reloadChipsListEffect = () => {
    (async() => {
      try {
        const chipsResponse = await axios.get(`/api/chips`);

        if (chipsResponse && chipsResponse.status === 200 && Array.isArray(chipsResponse.data)) {
          setChipsList(chipsResponse.data);
        }

      } catch (e) {
        errorToast();
      }
    })();
  }

  const updateChipValuePairsEffect = () => {
    const result = [];
    chipsList.forEach(chip => {
      const chipValues = chip['base_chip_values'];
      chipValues.forEach(chipValue => {
        result.push({
          baseChipId: chip.id,
          secondaryChipId: chipValue['secondary_chip_id']
        });
      });
    });
    setChipValuePairs(result);
  }

  useEffect(reloadChipsListEffect, []);
  useEffect(updateChipValuePairsEffect, [chipsList]);

  const deleteChip = async (chipId) => {
    try {
      const chipsResponse = await axios.delete(`/api/chips/${chipId}`);

      if (chipsResponse && chipsResponse.status === 200 && Array.isArray(chipsResponse.data)){
        setChipsList(chipsResponse.data);
        M.toast({ html: 'Chip destroyed!' });
      }

    } catch (e) {
      errorToast();
    }
  }

  const addNewChipValue = async (baseChipId) => {
    try{
      const newChipValueObject = {
        'chip_value': {
          base_chip_id: baseChipId,
          secondary_chip_id: newChipValueSecondaryChipId,
          value: editingChipValue
        }
      }
      const chipsResponse = await axios.post(`/api/chip_values`, newChipValueObject);

      if (chipsResponse && chipsResponse.status === 200){
        setChipsList(chipsResponse.data);
        setNewChipValueSecondaryChipId("");
        setChipValueActiveIndex(undefined);
        setEditingChipValue("");
        M.toast({ html: 'I smell money $$$' });
      }
    } catch (e) {
      errorToast();
    }
  }

  const updateChipValue = async (chipValueId) => {
    try{
      const updatedChipValue = {
        'chip_value': {
          id: chipValueId,
          value: editingChipValue
        }
      }
      const chipsResponse = await axios.put(`/api/chip_values/${chipValueId}`, updatedChipValue);

      if (chipsResponse && chipsResponse.status === 200){
        setChipsList(chipsResponse.data);
        setChipValueActiveIndex(undefined);
        setEditingChipValue("");
      }
    } catch (e) {
      errorToast();
    }
  }

  const deleteChipValue = async (chipValueId) => {
    try {
      const chipsResponse = await axios.delete(`/api/chip_values/${chipValueId}`);

      if (chipsResponse && chipsResponse.status === 200){
        setChipsList(chipsResponse.data);
        M.toast({ html: 'Destroyed!' });
      }

    } catch (e) {
      errorToast();
    }
  }



  const errorToast = () => M.toast({ html: "Yo! It ain't workin'" });

  const getChipData = (chipId) => chipsList.find(chip => chip.id === chipId);

  const checkIfPairExists = (baseChipId, secondaryChipId) => {
    return chipValuePairs.find(chipValuePair =>
      chipValuePair.baseChipId === baseChipId &&
      chipValuePair.secondaryChipId === secondaryChipId);
  }

  const secondaryChipOptions = (baseChipId) => {
    const options = chipsList.map((chip, index) => {
      if (chip.id !== baseChipId && !checkIfPairExists(baseChipId, chip.id)) {
        return <option key={`chip-option-${index}`} value={chip.id}>{chip.name}</option>
      }else {
        return null;
      }
    });

    return options.filter(option => option !== null);
  };

  const chipActions = (id) => (
    <Row>
      <Col>
        <Button flat node="button" icon="add" onClick={() => setChipValueActiveIndex(id)} />
      </Col>
      <Col>
        <YesNoModal
          body={"Maan, y'a sure about this?"}
          yesAction={() => deleteChip(id)}
          triggerNode={<Button flat node="button" icon="delete" />} />
      </Col>
    </Row>
  )

  const newChipValueForm = (id) => {
    if (chipValueActiveIndex !== id){
      return null;
    }

    return (
      <Row>
        <Col>
          <Select value={newChipValueSecondaryChipId} name="secondary_chip" onChange={(e) => setNewChipValueSecondaryChipId(e.target.value)}>
            <option disabled value="">Secondary chip</option>
            {secondaryChipOptions(id)}
          </Select>
        </Col>
        <Col>
          <TextInput label="Value" type="number" value={editingChipValue} onChange={(e) => setEditingChipValue(e.target.value)}  />,
        </Col>
        <Col>
          <Button flat icon="check" onClick={() => addNewChipValue(id)} />
        </Col>
        <Col>
          <Button flat icon="cancel" onClick={() => setChipValueActiveIndex(undefined)} />
        </Col>
      </Row>
    );
  }

  const singleChipValueInfo = (chipValueData, index) => {
    const secondaryChipId = chipValueData && chipValueData.secondary_chip_id ? chipValueData.secondary_chip_id : undefined;
    const { name:secondaryChipName, symbol:secondaryChipSymbol } = getChipData(secondaryChipId) || {};
    return(
      <tr key={`secondary-chip-${index}`}>
        <td>{ `${secondaryChipName} [${secondaryChipSymbol}]` }</td>
        {
          chipValueActiveIndex === chipValueData.id &&
          [
            <td key={`chip-value-input-${index}`}><TextInput defaultValue={chipValueData.value} onChange={(e) => setEditingChipValue(e.target.value)} /></td>,
            <td key={`chip-value-save-${index}`}><Button flat node="button" icon="check" onClick={() => updateChipValue(chipValueData.id)} /></td>,
            <td key={`chip-value-cancel-${index}`}><Button flat node="button" icon="cancel" onClick={() => setChipValueActiveIndex(undefined)} /></td>
          ]
        }
        {
          chipValueActiveIndex !== chipValueData.id &&
          [
            <td key={`chip-value-${index}`}>{ chipValueData.value }</td>,
            <td key={`chip-value-edit-${index}`}><Button flat node="button" icon="edit" onClick={() => setChipValueActiveIndex(chipValueData.id)} /></td>
          ]
        }
        <td>
          <YesNoModal
            body={"Maan, y'a sure about this?"}
            yesAction={() => deleteChipValue(chipValueData.id)}
            triggerNode={<Button flat node="button" icon="delete" />} />
        </td>
      </tr>
    )
  }

  const chipValuesTable = (chip) => (
    <Table>
      <thead>
      <tr>
        <th>Secondary chip</th>
        <th>Value</th>
        <th colSpan={3}>Actions</th>
      </tr>
      </thead>
      <tbody>
        { chip.base_chip_values.map((chipValueData, index) => singleChipValueInfo(chipValueData, index)) }
      </tbody>
    </Table>
  )

  const singleChipInfo = (chip, index) => (
    <CollapsibleItem key={`base-chip-${index}`} expanded={false} header={`${chip.name} [${chip.symbol}]`} node="div">
      { chipActions(chip.id) }
      { newChipValueForm(chip.id) }
      { chipValuesTable(chip) }
    </CollapsibleItem>
  )

  return (
    <div className='section'>
      <h5>Chips In Tha Hood</h5>

      <Collapsible>
        {
          chipsList.map((chip, index) => singleChipInfo(chip, index))
        }
      </Collapsible>
    </div>
  );
}

export default ListChips;