import React, { useState } from 'react';
import { Button, Card, Drawer } from 'antd';
import {
  ClockCircleTwoTone,
  FilterTwoTone,
  SaveTwoTone,
} from '@ant-design/icons';
import { Props } from './types';
import Search from '../Search';
import DashboardTable from 'components/DashboardTable';
import Layout, { LeftSidebar } from 'components/Layout';
import styles from './Dashboard.module.scss';

const Dashboard = (props: Props): JSX.Element => {
  const {
    cards,
    columns,
    actionsWithSelectedCards,
    actionsWithCards,
    isGroupSidebar,
    isUploadButton,
    onRowEvent,
    loading,
    onSearch,
    hasSelected,
    pageState,
    rowSelection,
    filters,
    leftSideBarContent,
    cardInfoComponent,
    addNewEntity,
    changeRowCount,
    addRecordAction,
    setSelectedTag,
    setSelectedInfoCard,
    tagDrawer,
    osDrawer,
    setCheckedColumns,
    getCheckedColumns,
    nameTable,
    dashboardState,
    setSorterField,
    setDisabledForm,
    getRowId = (record: any) => record.id,
    getCheckboxProps,
  } = props;
  const [visibleFilters, setVisibleFilters] = useState(false);

  const showFilter = visibleFilters && filters;

  return (
    <>
      <Layout>
        <div className={styles['wrapper']}>
          {/* TODO: раскомментировать после релиза */}
          {/*<div className={styles['wrapper_search-title-button-group']}>*/}
          {/*  <Search translations={''} />*/}
          {/*  /!*  <div className={styles['button_group']}>*!/*/}
          {/*  /!*    <Button*!/*/}
          {/*  /!*      className={styles['button_group__button']}*!/*/}
          {/*  /!*      type="default"*!/*/}
          {/*  /!*      icon={<SaveTwoTone style={{ fontSize: 20 }} />}*!/*/}
          {/*  /!*    />*!/*/}
          {/*  /!*    <Button*!/*/}
          {/*  /!*      className={styles['button_group__button']}*!/*/}
          {/*  /!*      type="default"*!/*/}
          {/*  /!*      icon={<ClockCircleTwoTone />}*!/*/}
          {/*  /!*    />*!/*/}
          {/*  /!*    <Button*!/*/}
          {/*  /!*      className={styles['button_group__button']}*!/*/}
          {/*  /!*      type="default"*!/*/}
          {/*  /!*      onClick={() => {*!/*/}
          {/*  /!*        setVisibleFilters((state) => !state);*!/*/}
          {/*  /!*      }}*!/*/}
          {/*  /!*      icon={<FilterTwoTone />}*!/*/}
          {/*  /!*    />*!/*/}

          {/*  /!*    /!*<HelpQuery />*!/*!/*/}
          {/*  /!*  </div>*!/*/}
          {/*</div>*/}
          <Card className={styles['wrapper_card-body-style']}>
            {leftSideBarContent && (
              <LeftSidebar leftSideBarContent={leftSideBarContent} />
            )}
            <DashboardTable
              setSorterField={setSorterField}
              dashboardState={dashboardState}
              nameTable={nameTable}
              setCheckedColumns={setCheckedColumns}
              getCheckedColumns={getCheckedColumns}
              setSelectedTag={setSelectedTag}
              setSelectedInfoCard={setSelectedInfoCard}
              actionsWithCards={actionsWithCards}
              actionsWithSelectedCards={actionsWithSelectedCards}
              isGroupSidebar={isGroupSidebar}
              isUploadButton={isUploadButton}
              onRowEvent={onRowEvent}
              columns={columns}
              cards={cards}
              loading={loading}
              hasSelected={hasSelected}
              onSearch={onSearch}
              pageState={pageState}
              rowSelection={rowSelection}
              addNewEntity={addNewEntity}
              changeRowCount={changeRowCount}
              addRecordAction={addRecordAction}
              cardInfoComponent={cardInfoComponent}
              setDisabledForm={setDisabledForm}
              getRowId={getRowId}
              getCheckboxProps={getCheckboxProps}
            />
            {osDrawer}
            {tagDrawer}
            {showFilter && (
              <Drawer
                closable
                mask={false}
                visible={visibleFilters}
                getContainer={false}
                style={{ position: 'absolute' }}
                height={180}
                title="Filters"
                placement="right"
                onClose={() => setVisibleFilters(false)}
              >
                {filters}
              </Drawer>
            )}
          </Card>
        </div>
      </Layout>
    </>
  );
};

export default Dashboard;
