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

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

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

const Results = observer(() => {
  const { $results } = useStore();
  const values = toJS($results.values);

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

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

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