import React, { useState } from 'react';
import { Box, ContainerDeprecated } from '@nova-hf/ui';
import SideMenuLayout from 'beta/components/layouts/SideMenuLayout';
import History from 'beta/containers/history/History';
import { HistoryFilters } from 'beta/containers/history/historyFilters';
import { IContext } from 'beta/typings/context';

type SaganProps = {
  customerId?: string;
};

const Sagan = ({ customerId }: SaganProps) => {
  const COLOR = 'pink';
  const [filter, setFilter] = useState('All');
  const onSelect = (item: string) => {
    setFilter(item);
  };
  return (
    <SideMenuLayout color={COLOR} title="Sagan">
      <Box padding={5} backgroundColor="white" boxShadow="small">
        <ContainerDeprecated underBar withStickyBar row>
          <HistoryFilters color={COLOR} onSelect={onSelect} />
          <History category={filter} recipientId={customerId} />
        </ContainerDeprecated>
      </Box>
    </SideMenuLayout>
  );
};

Sagan.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    customerId: query.customerId,
    namespacesRequired: [],
  };
};

export default Sagan;