import React, { useState } from 'react';

import { getImportsString, getKeyByState, getPropsString } from '../helpers';

import Playground from '../Playground/Playground';
import { Divider, DotPagination, Pagination, Stack, TablePagination } from '@/mui/components';

const defaultRowsPerPage = [10, 20, 50];

function PaginationSection() {
  const [page, setPage] = useState(1);
  const [rowsPerPageOptions] = useState(defaultRowsPerPage);
  const [rowsPerPage, setRowsPerPage] = useState(defaultRowsPerPage[0]);

  return (
    <Playground
      title="Pagination / DotPagination / TablePagination"
      initialState={[
        {
          type: 'input-number',
          stateId: 'count',
          selected: 100,
        },
        {
          type: 'select',
          stateId: 'rowsPerPage',
          options: rowsPerPageOptions,
          selected: rowsPerPage,
        },
        {
          type: 'checkbox',
          stateId: 'disabled',
          selected: false,
        },
        {
          type: 'select',
          stateId: 'size',
          options: ['large', 'medium', 'small', 'xSmall'],
          selected: 'medium',
        },
      ]}
      renderCallback={(state) => {
        const paginationPropsString = getPropsString({
          ...state,
          count: '!!!Math.ceil(count / rowsPerPage)',
          rowsPerPage: '!!!rowsPerPage',
        });
        const tablePaginationPropsString = getPropsString({
          ...state,
          count: '!!!count',
          rowsPerPage: '!!!rowsPerPage',
          rowsPerPageOptions: `!!!${JSON.stringify(rowsPerPageOptions)}`,
        });

        const importsList = getImportsString([[['Pagination'], ['DotPagination'], ['TablePagination']]]);

        const data = `const count = ${state.count};\nconst rowsPerPage = ${state.rowsPerPage};`;

        return {
          component: (
            <Stack spacing={4} key={getKeyByState(state)} divider={<Divider />}>
              <div>
                <Pagination
                  count={Math.ceil(state.count / state.rowsPerPage)}
                  page={page}
                  size={state.size}
                  disabled={state.disabled}
                  onChange={(event, newPage) => setPage(newPage)}
                />
              </div>
              <div>
                <DotPagination count={Math.ceil(state.count / state.rowsPerPage)} page={page} />
              </div>
              <div>
                <TablePagination
                  component="div"
                  size={state.size === 'small' ? 'small' : 'medium'}
                  page={page}
                  count={state.count}
                  disabled={state.disabled}
                  rowsPerPage={state.rowsPerPage}
                  rowsPerPageOptions={rowsPerPageOptions}
                  onPageChange={(event, newPage) => setPage(newPage)}
                  onRowsPerPageChange={(event) => {
                    setRowsPerPage(parseInt(event.target.value, 10));
                    setPage(1);
                  }}
                />
              </div>
            </Stack>
          ),
          code: `${importsList}
${data}

<Pagination${paginationPropsString}/>
<DotPagination${paginationPropsString}/>
<TablePagination${tablePaginationPropsString}/>`,
        };
      }}
      onChange={(nextState, id) => {
        if (id === 'rowsPerPage' || id === 'count') {
          setPage(1);
        }
      }}
    />
  );
}

export default PaginationSection;
