/* eslint-disable react/jsx-key */
import { useStore } from '@/stores/hooks';
import { observer } from 'mobx-react-lite';
import styled from 'styled-components';
import Alert from 'ui/elements/Alert';
import { Box, Flex } from 'ui/grid';

const Bold = styled.span`
  font-weight: bold;
`;

function Message(title, text) {
  return (
    <>
      <Bold>{title}</Bold>
      {': '}
      {text}
    </>
  );
}

const AlertWrapper = styled(Box)`
  margin: 0 0 5px 0;
`;

function getElementsErrors({ $calculation, $process }) {
  return Object.values($calculation.$validation).map((validation) => {
    const elementErrors = validation.getErrors();
    const elementTitle = validation.params.err_title;

    return elementErrors.map(({ key, message }) => (
      <AlertWrapper>
        <Alert
          key={key}
          type={$process.has('Unlimited') ? 'warning' : 'error'}
          showIcon
          message={Message(elementTitle, message)}
        />
      </AlertWrapper>
    ));
  });
}

function getPaymentsTableErrors({ $tables, $process }) {
  const { payments } = $tables;
  const errors = payments.validation.getErrors();
  const title = payments.validation.params.err_title;

  return errors.map(({ key, message }) => (
    <AlertWrapper>
      <Alert
        key={key}
        type={$process.has('Unlimited') ? 'warning' : 'error'}
        showIcon
        message={Message(title, message)}
      />
    </AlertWrapper>
  ));
}

function getInsuranceTableErrors({ $tables, $process }) {
  const { insurance } = $tables;
  const errors = insurance.validation.getErrors();
  const title = insurance.validation.params.err_title;

  return errors.map(({ key, message }) => (
    <AlertWrapper>
      <Alert
        key={key}
        type={$process.has('Unlimited') ? 'warning' : 'error'}
        showIcon
        message={Message(title, message)}
      />
    </AlertWrapper>
  ));
}

const Errors = observer(() => {
  const store = useStore();
  const { $calculation, $tables } = store;

  const hasElementsErrors = Object.values($calculation.$validation).some(
    (validation) => validation.hasErrors
  );
  const hasPaymentsErrors = $tables.payments.validation.hasErrors;
  const hasInsuranceErrors = $tables.insurance.validation.hasErrors;

  if (!hasElementsErrors && !hasPaymentsErrors && !hasInsuranceErrors) {
    return <Alert type="success" showIcon message="Ошибок нет 🙂" />;
  }

  const elementsErrors = getElementsErrors(store);
  const paymentsErrors = getPaymentsTableErrors(store);
  const insuranceErrors = getInsuranceTableErrors(store);

  const errors = [...elementsErrors, ...paymentsErrors, ...insuranceErrors];

  return <Flex flexDirection="column">{errors}</Flex>;
});

function Validation() {
  return (
    <Box>
      <Errors />
    </Box>
  );
}

export default {
  Component: Validation,
  id: 'validation',
  title: 'Ошибки',
};