export default function WorkflowUnits() {

  let temp_filters = [
    {
      title: 'Room area',
      field: 'area'
    }, {
      title: 'Room group',
      field: 'group'
    }, {
      title: 'Room availability',
      field: 'availability'
    }, {
      title: 'Room occupancy',
      field: 'occupancy'
    }
  ]
  const [response, setResponse] = useState(false);
  const [items, setItems] = useState([]);
  const [filters, setFilters] = useState(temp_filters);
  const [hidden, setHidden] = useState([]);

  let api = process.env.REACT_APP_APP_API + '/api/v1/elastic?index=unit';

  useEffect(() => {

    if (!response) {
      axios.get(api)
          .then(res => {
            let axios_items = res.data.hits.hits;
            setItems(axios_items);
            if (axios_items.length > 0) {
              let _filters = filters;
              _filters.map((filter, i) => {
                filter['values'] = [];
                const unique = [...new Set(axios_items.map(item => item._source[filter.field]))];
                unique.map((filterValue, j) => {
                  filter['values'].push({
                    title: filterValue,
                    count: axios_items.filter(countItem => countItem._source[filter.field] === filterValue).length,
                    checked: false
                  });
                });
              });
              setResponse(true);
              setFilters(_filters);
            }
          });
    }
  });

  let handleFilterChange = (filterIndex, valueIndex, checked) => {

    let _filters = filters;
    let _hidden = [];
    let data = items;
    _filters[filterIndex].values[valueIndex].checked = checked;

    _filters.map((filter, i) => {
      if (filter.values !== undefined) {
        let checkedGroup = filter.values.filter(flItem => flItem.checked === true);
        data.map((item, index) => {
          if (checkedGroup.length > 0) {
            if (checkedGroup.filter(e => e.title === item._source[filter.field]).length === 0) {
              _hidden.push(item._id);
            }
          }
        });
      }
    });

    _filters.map((filter, i) => {
      filter.values.map((filterValue, k) => {
        filterValue.count = data.filter(countItem => (!_hidden.includes(countItem._id) && countItem._source[filter.field] === filterValue.title)).length
      });
    });

    setFilters(_filters)
    setHidden(_hidden)
  }

  let renderItems = () => {
    let grouped = []

    if (items.length > 0) {
      let group_by = 'occupancy';
      items.forEach(function (item, index) {

        let i = item._source[group_by]
        if (!grouped[i]) {
          grouped[i] = [];
        }

        var obj = item._source

        grouped[i].push(obj);
      });

      return (
          Object.keys(grouped).map((group_title, k) => {
                return (
                    <div key={k}>
                      <h6>{group_title}</h6>
                      <FlexboxGrid>
                        {
                          items.map((item, index) => {
                                if (!hidden.includes(item._id)) {
                                  return (
                                      <FlexboxGrid.Item
                                          colspan={6}>
                                        <Checkbox>{item._source.title}</Checkbox>
                                      </FlexboxGrid.Item>
                                  )
                                }
                              }
                          )
                        }
                      </FlexboxGrid>
                    </div>
                )
              }
          )
      )
    }
  }

  let renderFilterItems = (filter, filterIndex) => {
    if (filter.values !== undefined) {
      if (filter.values.length > 0) {
        return (
            filter.values.map((filterItem, index) => {
                  return (
                      <Checkbox
                          key={index}
                          onChange={(value, checked) => {
                            handleFilterChange(filterIndex, index, checked)
                          }}
                      >
                        {filterItem.title}
                        <span className="facet__counter">
                    {filterItem.count}
                  </span>
                      </Checkbox>
                  )
                }
            )
        )
      }
    }

  }

  let renderFilter = () => {
    if (filters.length > 0) {
      return (
          filters.map((filter, index) => (
              <CheckboxGroup className={'facet__block'}>
                <p>{filter.title}</p>
                {renderFilterItems(filter, index)}
              </CheckboxGroup>
          ))
      )
    }
  }

  return (
      <>
        <div className="page" style={{
          display: 'flex',
          padding: '20px',
          borderRight: '1px solid #000'
        }}>
          <div style={{width: '80%'}}>
            {
              renderItems()
            }
          </div>
          <div style={{
            width: '20%',
            borderLeft: '1px solid #000',
            paddingLeft: '20px',
            paddingRight: '20px'
          }}>
            {
              renderFilter()
            }
          </div>
        </div>
      </>
  )
};