import React from 'react';
import { Button } from '@mui/material';
import MainLayout from '../layouts/MainLayout';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import TableCell from '@mui/material/TableCell';
import TableBody from '@mui/material/TableBody';
import Table from '@mui/material/Table';
import { Activity, Product } from '../types/calc';
import { green } from '@mui/material/colors';
import Icon from '@mui/material/Icon';

export const getStaticProps = async () => {
  const productsRes = await fetch('http://127.0.0.1:5000/api/products'); // TODO: добавить конфиг, а в него адрес сервера
  const productsData: Product[] = await productsRes.json();
  const activitiesRes = await fetch('http://127.0.0.1:5000/api/activities');
  const activitiesData: Activity[] = await activitiesRes.json();
  return {props:{products: productsData, activities: activitiesData}}
}

const Index = ({products, activities}: {products: Product[], activities: Activity[]}) => {
  const productsArr = [
    {
      value: '',
      id: 0,
    },
  ];
  const [productsFields, setProductsFields] = React.useState(productsArr);
  const [categories, setCategories] = React.useState({});

  function addProductField() {
    setProductsFields(s => {
      const id = s.length;
      return [...s, {
        value: '',
        id: id,
      }];
    });
  }

  function getCategories(item) {
    if (!item.value) {
      return [];
    }
    const product = products.filter(x => x.name == item.value)[0];
    if (!product) {
      return [];
    }
    let categoryArr = [];
    for (const category of product.categories) {
      categoryArr.push({ name: category.name, id: category.id });  // <Item>
    }
    return categoryArr;
  }

  let [results, setResults] = React.useState({});
  const categoriesCalc1 = {};
  for (const product of products) {
    for (const category of product.categories) {
      results[category.id] = 0;
      categoriesCalc1[category.id] = { quantity: 0 };
      let conditions = {};
      for (const textCondition of category.textConditions) {
        conditions[category.id + '_' + textCondition.name] = { type: 'textCondition', value: 0 };
      }
      for (const numberCondition of category.numberConditions) {
        conditions[category.id + '_' + numberCondition.name] = { type: 'numberCondition', value: 0 };
      }
      for (const numberConditionMultiply of category.numberConditionsMultiply) {
        conditions[category.id + '_' + numberConditionMultiply.name] = { type: 'numberConditionsMultiply', value: 1 };
      }
      for (const textConditionMultiply of category.textConditionsMultiply) {
        conditions[category.id + '_' + textConditionMultiply.name] = { type: 'textConditionMultiply', value: 1 };
      }
      categoriesCalc1[category.id].conditions = conditions;
    }
  }
  let [categoriesCalc, setCategoriesCalc] = React.useState(categoriesCalc1);

  function reCalc(categoryId) {
    let sum = 0;
    let mult = 1;
    for (const key of Object.keys(categoriesCalc[categoryId].conditions)) {
      let condition = categoriesCalc[categoryId].conditions[key];
      switch (condition.type) {
        case 'textCondition' :
          sum += condition.value;
          break;
        case 'numberCondition':
          sum += condition.value;
          break;
        case 'textConditionMultiply':
          mult *= condition.value;
          break;
        case 'numberConditionsMultiply':
          mult *= condition.value;
          break;
      }
    }
    // categoriesCalc[categoryId].setResult(mult * sum * categoriesCalc[String(categoryId)].quantity);
    // categoriesCalc[categoryId].result = mult * sum * categoriesCalc[String(categoryId)].quantity;
    setResults(oldResults => {
      let newResults = oldResults;
      newResults[categoryId] = mult * sum * categoriesCalc[String(categoryId)].quantity;
      return newResults;
    });
    console.log(results)
    console.log(mult * sum * categoriesCalc[String(categoryId)].quantity)
    return results[categoryId];
  }

  function zerofyCalc(item) {
    const product = products.filter(x => x.name == item.value)[0];
    for (const category of product.categories) {
      setResults({...results, [category.id]: 0})
      categoriesCalc[category.id].quantity = 0;
      let conditions = {};
      for (const textCondition of category.textConditions) {
        conditions[category.id + '_' + textCondition.name] = { type: 'textCondition', value: 0 };
      }
      for (const numberCondition of category.numberConditions) {
        conditions[category.id + '_' + numberCondition.name] = { type: 'numberCondition', value: 0 };
      }
      for (const numberConditionMultiply of category.numberConditionsMultiply) {
        conditions[category.id + '_' + numberConditionMultiply.name] = { type: 'numberConditionsMultiply', value: 1 };
      }
      for (const textConditionMultiply of category.textConditionsMultiply) {
        conditions[category.id + '_' + textConditionMultiply.name] = { type: 'textConditionMultiply', value: 1 };
      }
      categoriesCalc[category.id].conditions = conditions;
    }
  }

  function createConditionAutocomplete(category, condition, onChange) {
    return (<Autocomplete
      // value={item.value}
      onChange={onChange}
      // @ts-ignore
      isOptionEqualToValue={(option, value) => option.name === value.name}
      disablePortal
      id={category.id + '_' + condition.name}
      options={condition.states}
      // @ts-ignore
      getOptionLabel={option => option.name}
      sx={{ width: 200 }}
      renderInput={(params) => <TextField {...params} label="Product" />}
    />);
  }


  function renderConditions(item, categoryId) {
    const product = products.filter(x => x.name == item.value)[0];
    if (!product) {
      return [];
    }
    const category = product.categories.filter(x => x.id == categoryId)[0];
    if (!category) {
      return [];
    }
    let conditionsNamesArr = [];
    let conditionInputsArr = [];
    function createNumberCondition(condition) {
      conditionsNamesArr.push(condition.name);
      conditionInputsArr.push(<TextField
        id={category.id + '_' + condition.name}
        type="number"
        onChange={(e) => {
          categoriesCalc[categoryId].conditions[String(categoryId) + '_' + condition.name].value = Number(e.target.value);
          reCalc(category.id);
        }}
        InputLabelProps={{
          shrink: true,
        }}
        sx={{ width: 100 }}
      />);
    }

    function createTextCondition(condition) {
      conditionsNamesArr.push(condition.name);
      conditionInputsArr.push(createConditionAutocomplete(category, condition, (e, newValue) => {
        categoriesCalc[categoryId].conditions[String(categoryId) + '_' + condition.name].value = newValue ? newValue.hours : 0;
        reCalc(category.id);
      }));
    }

    for (const condition of category.textConditions) {
      createTextCondition(condition)
    }
    for (const condition of category.numberConditions) {
      createNumberCondition(condition);
    }
    for (const condition of category.numberConditionsMultiply) {
      createNumberCondition(condition);
    }
    for (const condition of category.textConditionsMultiply) {
      createTextCondition(condition);
    }

    return (<Table>
      <TableHead>
        <TableRow>
          {conditionsNamesArr.map(conditionName => {
            return (<TableCell key={category.id + '_' + conditionName}>{conditionName}</TableCell>);
          })}
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          {conditionInputsArr.map(conditionInput => {
            return (<TableCell key={category.id + '_' + conditionInput.props.id}>{conditionInput}</TableCell>);
          })}
        </TableRow>
      </TableBody>
    </Table>);
  }

  const activitiesArr = [
    {
      value: '',
      index: 0,
      id: 0
    }
  ];
  const [activitiesFields, setActivitiesFields] = React.useState(activitiesArr);

  function addActivityField() {
    setActivitiesFields(s => {
      const index = s.length;
      return [...s, {
        value: '',
        index: index,
        id: 0
      }];
    });
  }

  const activitiesCalc1 = {};
  for (const activity of activities) {
    let [activityResult, setActivityResult] = React.useState(0);
    activitiesCalc1[activity.id] = { result: activityResult, setResult: setActivityResult, quantity: 0, averageHours: (activity.minTime + activity.maxTime) / 2};
  }
  let [activitiesCalc, setActivitiesCalc] = React.useState(activitiesCalc1);

  function reCalcActivity(activityId) {
    activitiesCalc[activityId].setResult(activitiesCalc[activityId].quantity*activitiesCalc[activityId].averageHours);
    activitiesCalc[activityId].result = activitiesCalc[activityId].quantity*activitiesCalc[activityId].averageHours;
    return activitiesCalc[activityId].result;
  }

  return (
    <>
      <MainLayout>

        {productsFields.map((item, index) => {
          return (
            <div key={index + '_product'}>
              <div style={{ display: 'inline-flex' }}>

                <Autocomplete
                  style={{
                    margin: '10px',
                    verticalAlign: 'top',
                  }}
                  // value={item.value}
                  onChange={(e, newValue:Product) => {
                    // const index = Number(e.currentTarget.getAttribute("id"));
                    let newFields = [...productsFields];

                    // @ts-ignore
                    newFields[Number(index)].value = newValue ? newValue.name : '';
                    // console.log(JSON.stringify(newFields))
                    if (item.value) {
                      zerofyCalc(item);
                    }
                    setProductsFields(newFields);
                    let newCategories = {...categories};
                    newCategories[index] = getCategories(item);
                    setCategories(newCategories);
                  }
                  }
                  isOptionEqualToValue={(option, value) => option.id === value.id}
                  disablePortal
                  id={String(index)}
                  options={products}
                  getOptionLabel={option => option.name}
                  sx={{ width: 300 }}
                  renderInput={(params) => <TextField {...params} label="Product" />}
                />
                {item.value &&
                <TableContainer
                  style={{
                    minWidth: '200px',
                    display: 'block',
                  }}>
                  <Table>
                    <TableHead>
                      <TableRow key="test">
                        <TableCell>Category</TableCell>
                        <TableCell align="right">Conditions</TableCell>
                        <TableCell align="right">Quantity</TableCell>
                        <TableCell align="right"><b>Efforts Estimation, H:</b></TableCell>
                      </TableRow>
                    </TableHead>
                    <TableBody>
                      {categories[index].map((category, categoryIndex) => {
                        return (
                          <TableRow key={categoryIndex + '_category'}>
                            <TableCell>{category.name}
                              <Button onClick={() => {
                                let newCategories = {...categories};
                                newCategories[index].push({...category, id: category.id + 25000});
                                let product = products.filter(x => x.name == item.value)[0];
                                if (!product) {
                                  return [];
                                }
                                let newCategory = product.categories[category.id];
                                newCategory.id += 25000;
                                products[product.id].categories.push(newCategory);
                                setCategories(newCategories);
                                categoriesCalc[category.id + 25000] = categoriesCalc[category.id];
                                categoriesCalc[category.id + 25000].conditions =  categoriesCalc[category.id].conditions;
                              }}><Icon sx={{ color: "green" }}>add_circle</Icon></Button>
                            </TableCell>
                            <TableCell>{renderConditions(item, category.id)}</TableCell>
                            <TableCell><TextField
                              id={categoryIndex + '_quantity'}
                              type="number"
                              onChange={(event) => {
                                categoriesCalc[category.id].quantity = Number(event.target.value);

                                //categoriesCalc[category.id].setQuantity(Number(event.target.value));
                                reCalc(category.id);

                              }}
                              defaultValue={0}
                              InputLabelProps={{
                                shrink: true,
                              }}
                              sx={{ width: 100 }}
                            /></TableCell>
                            <TableCell align="right"><p>{results[category.id]}</p></TableCell>
                          </TableRow>
                        );
                      })}
                    </TableBody>
                  </Table>
                </TableContainer>

                }
              </div>
            </div>
          );
        })}

        <Button onClick={addProductField}><Icon sx={{ color: "green" }}>add_circle</Icon></Button>
        {activitiesFields.map((item, index) => {
          return (
            <div key={index + '_activity'}>
              <div style={{ display: 'inline-flex' }}>
                <Autocomplete
                  style={{
                    margin: '10px'
                  }}
                  onChange={(e, newValue) => {
                    // const index = Number(e.currentTarget.getAttribute("id"));
                    let newFields = [...activitiesFields];

                    // @ts-ignore
                    newFields[Number(index)].value = newValue ? newValue.name : '';
                    // @ts-ignore
                    newFields[Number(index)].id = newValue ? newValue.id : 0;
                    // console.log(JSON.stringify(newFields))
                    setActivitiesFields(newFields);
                  }
                  }
                  id={index + '_activity_autocomplete'}
                  isOptionEqualToValue={(option, value) => option.id === value.id}
                  disablePortal
                  options={activities}
                  getOptionLabel={option => option.name}
                  sx={{ width: 300 }}
                  renderInput={(params) => <TextField {...params} label="Activity" />}
                />
              </div>
              {item.value &&
                <>
              <div style={{ display: 'inline-flex', verticalAlign: 'bottom' }}>
                <TextField
                  style={{
                    margin: '10px'
                  }}
                  id={item.id + '_activity_quantity'}
                  type="number"
                  label="Quantity"
                  onChange={(event) => {
                    activitiesCalc[item.id].quantity = Number(event.target.value);
                    reCalcActivity(item.id);
                  }}
                  defaultValue={0}
                  sx={{ width: 100 }}
                />
              </div>
                <div style={{ display: 'inline-flex', verticalAlign: '-100%' }}><TextField
                  id={item.id + '_activity_result'}
                  label="Result"
                  value={activitiesCalc[item.id].result}
                  onChange={() => {}}
                  InputProps={{
                    readOnly: true,
                  }}
                  sx={{ width: 100 }}
                />
                </div>

              </>
              }

            </div>
          );
        })
        }
        <Button onClick={addActivityField}><Icon sx={{ color: "green" }}>add_circle</Icon></Button>
      </MainLayout>
    </>
  );
};

export default Index;