import { Box } from 'spaceweb/box';
import { Typography } from 'spaceweb/typography';
import { ColorPicker } from 'spaceweb/color-picker';
import s from '../Examples.mod.scss';

import { useStyle } from 'filepath';

const BUTTON_CLASSES = [
  {
    height: '4px',
    width: '10px',
    border: '1px solid',
  },
  ({ theme }) => ({
    color: theme.spr.ui01,
  }),
];

const someFlag = true;

const EXAMPLE_OVERRIDES = {
  Button: {
    style: 'm-4',
  },
  ColorPicker: {
    Heading: {
      style: [
        {
          height: '4px',
          ...(someFlag ? { height: '5px' } : {}),
        },
        'absolute',
      ],
    },
  },
};

function ExampleComponent({ className, style, ...props }) {
  const combinedClassName = [className, 'p-4'];
  
  const { css } = useStyle();

  return (
    <>
      <Box className={css('abc def', [() => ({ height: '5px' })])} />
      <Box className={[BUTTON_CLASSES, props.buttonStyles, { display: 'flex' }, 'm-2']} style={s.active}>
        Example component
        <ColorPicker overrides={EXAMPLE_OVERRIDES.ColorPicker} />
        <Typography style={combinedClassName} />
      </Box>
    </>
  );
}