import React, { useContext, useEffect } from 'react';
import { Row, Col, Button, Tabs, Table, Divider, Radio, Select } from 'antd';
import { ContainerOutlined, SearchOutlined, UserSwitchOutlined } from '@ant-design/icons';
import { stores_Context } from '../config';
import { observer } from 'mobx-react';
import { NavLink, useParams } from 'react-router-dom';
import * as comm from '../utils/commons';
import * as config from '../config';
import { utils, writeFileXLSX } from 'xlsx';
import SearchForm from './../components/search/SearchForm';

const Sale_KPI = () => {
  const { sale_store, date_picker_store: searchFormStore } = useContext(stores_Context);
  const { formValues } = searchFormStore;

  const pageRefresh = (queryData) => {
    const overviewFlag = queryData.DepartmentList.toLowerCase() === 'all' || queryData.DepartmentList.toLowerCase().includes(',');
    queryData.groupType = overviewFlag ? 'overview' : 'dept';
  };
  return (
    <div>
      <Row gutter={16} style={{ margin: '-16px -8px' }}>
        <Col md={24} lg={24} xxl={24}>
          <SearchForm
            defaultValue={{
              initialValue: {
                ...formValues,
              },
              shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'years'],
              fieldProps: {
                DepartmentList: { show_all: true },
                WebCode: { show_all: true },
                years: { hide_vs: true },
              },
            }}
            onSubmit={(_err, obj, form, str) => {
              pageRefresh(obj);
            }}
          />
        </Col>
      </Row>

      <Row>
        <Col className="gutter-row" md={24}></Col>
      </Row>
    </div>
  );
};
export default observer(Sale_KPI);