import { elements, formatters, id, title, titles } from './config';
import { Container, Head } from '@/Components/Layout/Element';
import { useStore } from '@/stores/hooks';
import { min } from '@/styles/mq';
import { toJS } from 'mobx';
import { observer } from 'mobx-react-lite';
import styled from 'styled-components';
import { Text } from 'ui/elements';
import { Box } from 'ui/grid';

const Grid = styled(Box)`
  display: grid;
  grid-template-columns: 1fr;

  ${min('tablet')} {
    grid-template-columns: 1fr 1fr;
  }
`;

const Wrapper = styled.div`
  margin-bottom: 18px;
`;

const Results = observer(() => {
  const { $process, $results } = useStore();

  const resultsValues = toJS($results.values);
  // eslint-disable-next-line no-negated-condition
  const values = !$process.has('Unlimited') ? elements.filter((x) => !x.startsWith('_')) : elements;

  return (
    <Grid>
      {values.map((valueName) => {
        const formatter = formatters[valueName];
        const storeValue = resultsValues[valueName];
        const value = formatter(storeValue);

        return (
          <Wrapper key={valueName}>
            <Container key={valueName}>
              <Head title={titles[valueName]} />
              <Text>{value}</Text>
            </Container>
          </Wrapper>
        );
      })}
    </Grid>
  );
});

export default {
  Component: Results,
  id,
  title,
};
