import { Button, Card, Drawer, Pagination } from 'antd';
import { observer } from 'mobx-react-lite';
import { useState } from 'react';
import { useStore } from 'stores/StoreProvider';
import {
  BulletinsContentDrawer,
  BulletinsContentTicket,
} from './BulletinContent';
import './Ncircc.module.scss';

type BulletinTypeProps = {
  onCloseBulletin: any;
  visibleBulletin: boolean;
  onShowBulletin: any;
};

export const Bulletins = observer((props: BulletinTypeProps): JSX.Element => {
  const uiStore = useStore().ncirccUiStore;
  const cardContent = uiStore.mockBulletins.map((item: any) => (
    <Card.Grid
      onClick={() => props.onShowBulletin(item.id)}
      style={!props.visibleBulletin ? { width: '100%' } : { width: '54%' }}
    >
      {BulletinsContentTicket(item)}
    </Card.Grid>
  ));

  const [pagination, setPagination] = useState<any>({
    current: 1,
    pageSize: 6,
    total: cardContent.length,
  });

  const onchangePagination = (value: any): void => {
    setPagination((prevState: any) => ({ ...prevState, current: value }));
  };

  return (
    <div className="flex-colum ">
      <Card className="containerMessage site-drawer-render-in-current-wrapper">
        <div className="flex-colum">
          {cardContent.slice(
            (pagination.current - 1) * pagination.pageSize,
            pagination.current * pagination.pageSize,
          )}
          <div
            style={
              !props.visibleBulletin ? { width: '100%' } : { width: '54%' }
            }
            className="paginationMessage"
          >
            <Pagination
              onChange={onchangePagination}
              current={pagination.current}
              pageSize={pagination.pageSize}
              total={pagination.total}
              style={
                !props.visibleBulletin ? { float: 'right' } : { float: 'right' }
              }
            />
          </div>
        </div>
        {props.visibleBulletin ? (
          <Drawer
            title={uiStore?.getSelectedBulletinObject?.name}
            placement="right"
            closable={true}
            onClose={props.onCloseBulletin}
            visible={props.visibleBulletin}
            getContainer={false}
            style={{ position: 'absolute', width: '45%' }}
            mask={false}
            footer={<Button type="primary">Скачать документ</Button>}
          >
            {BulletinsContentDrawer(uiStore?.getSelectedBulletinObject)}
          </Drawer>
        ) : null}
      </Card>
    </div>
  );
});
