import * as React from 'react';
import View from '../../view';
import { useTheme } from '../../theme';

const sortAndFilterScale = (space: { [x: string]: string | number }) =>
  Object.entries(space)
    .filter(([sp]) => {
      return sp.indexOf('.') !== 0;
    })
    .filter(([sp]) => {
      return !sp.match(/^[a-z]/);
    })
    .sort(([x], [y]) =>
      // eslint-disable-next-line no-nested-ternary
      Number(x) < Number(y) ? -1 : Number(x) > Number(y) ? 1 : 0,
    );

const Scale = () => {
  const theme = useTheme();

  return (
    <View as="ol">
      {sortAndFilterScale(
        // @ts-ignore
        theme.space,
      ).map(([label, value]: [string, number], i) => (
        <View as="li" sx={{ marginBottom: 3, width: '100%' }} key={label}>
          <View
            sx={{
              color: 'black',
              width: 4,
            }}
          >
            {label}
          </View>
          <View
            sx={{
              width: value,
              height: 3,
              backgroundColor:
                // eslint-disable-next-line no-nested-ternary
                i % 3 === 0 ? 'gray.1' : i % 3 === 1 ? 'gray.2' : 'gray.0',
            }}
          />
        </View>
      ))}
    </View>
  );
};

export default Scale;