import PaymentsTable from './PaymentsTable';
import Results from './Results';
import Validation from './Validation';
import Background from '@/Components/Layout/Background';
import { useStore } from '@/stores/hooks';
import { min } from '@/styles/mq';
import { observer } from 'mobx-react-lite';
import styled from 'styled-components';
import { Badge, Tabs } from 'ui';

const outputTabs = [PaymentsTable, Results, Validation];
const items = outputTabs.map(({ Component, id, title }) => {
  let Label = () => title;

  if (id === 'validation') {
    Label = observer(() => {
      const { $calculation, $tables } = useStore();
      const hasErrors =
        $calculation.hasErrors ||
        $tables.fingap.hasErrors ||
        $tables.insurance.hasErrors ||
        $tables.payments.hasErrors;

      return (
        <Badge offset={[5, 0]} dot={hasErrors}>
          {title}
        </Badge>
      );
    });
  }

  return {
    children: <Component />,
    key: id,
    label: <Label />,
  };
});

const Wrapper = styled(Background)`
  padding: 4px 10px;
  min-height: 200px;

  ${min('laptop')} {
    padding: 4px 18px;
    min-height: 641px;
  }
`;

function Output() {
  return (
    <Wrapper>
      <Tabs items={items} />
    </Wrapper>
  );
}

export default Output;