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 { useEffect, useState } from 'react';
import styled from 'styled-components';
import { Badge, Tabs } from 'ui/elements';

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: 790px;
  }
`;

const Output = observer(() => {
  const { $calculation, $tables, $results } = useStore();
  const [activeKey, setActiveKey] = useState(undefined);

  useEffect(() => {
    const hasErrors =
      $calculation.hasErrors ||
      $tables.fingap.hasErrors ||
      $tables.insurance.hasErrors ||
      $tables.payments.hasErrors;

    if ($results.payments.length > 0) {
      setActiveKey('payments-table');
    }

    if (hasErrors) {
      setActiveKey('validation');
    }
  }, [
    $calculation.hasErrors,
    $results.payments.length,
    $tables.fingap.hasErrors,
    $tables.insurance.hasErrors,
    $tables.payments.hasErrors,
  ]);

  return (
    <Wrapper>
      <Tabs
        items={items}
        activeKey={activeKey}
        onChange={(key) => {
          setActiveKey(key);
        }}
      />
    </Wrapper>
  );
});

export default Output;