import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState } from 'react';
import Search from '../../components/Search';
import Button from '../../components/Button';
import { Filter16, SubtractGlyph } from '@wfp/icons-react';
import { Module, ModuleHeader, ModuleBody } from '../../components/Module';
import Table from './DataTable';
import MyForm from './Form';

function TableWithFilter() {
  var _useState = useState(),
      _useState2 = _slicedToArray(_useState, 2),
      simpleSearch = _useState2[0],
      setSimpleSearch = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      filterActivated = _useState4[0],
      setFilterActivated = _useState4[1];

  var _useState5 = useState({}),
      _useState6 = _slicedToArray(_useState5, 2),
      search = _useState6[0],
      setSearch = _useState6[1];

  var handleOnFormSubmit = function handleOnFormSubmit(formdata) {
    setSearch(formdata);
  };

  var handleClearFilters = function handleClearFilters() {
    setSearch({});
  };

  var handleSearchOnchange = function handleSearchOnchange(value) {
    setSimpleSearch(value);
  };

  var toggleFilter = function toggleFilter() {
    if (filterActivated) {
      setSearch({});
    }

    setFilterActivated(!filterActivated);
  };

  return /*#__PURE__*/React.createElement(Module, {
    noMargin: true
  }, /*#__PURE__*/React.createElement(ModuleHeader, {
    filter: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Search, {
      id: "tablewithfilter",
      placeHolderText: "Type to filter",
      value: simpleSearch,
      onChange: handleSearchOnchange
    }), /*#__PURE__*/React.createElement(Button, {
      onClick: toggleFilter,
      icon: filterActivated ? SubtractGlyph : Filter16,
      kind: "secondary",
      style: {
        marginLeft: '1em'
      }
    }, filterActivated ? 'Hide filters' : 'Advanced filters'))
  }, "Large table with filter"), filterActivated && /*#__PURE__*/React.createElement(ModuleBody, null, /*#__PURE__*/React.createElement(MyForm, {
    onFormChange: handleOnFormSubmit,
    clearFilters: handleClearFilters
  })), /*#__PURE__*/React.createElement(Table, {
    filterText: simpleSearch,
    advanceFilter: search
  }));
}

export default TableWithFilter;