import { ContainerClass, componentName } from '../../components/descope-container/ContainerClass';
import { createHelperVars, getThemeRefs } from '../../helpers/themeHelpers';
import globals from '../globals';

const globalRefs = getThemeRefs(globals);

const compVars = ContainerClass.cssVarList;

const verticalAlignment = {
  start: { verticalAlignment: 'start' },
  center: { verticalAlignment: 'safe center' },
  end: { verticalAlignment: 'end' },
};

const horizontalAlignment = {
  start: { horizontalAlignment: 'start' },
  center: { horizontalAlignment: 'safe center' },
  end: { horizontalAlignment: 'end' },
};

const [helperTheme, helperRefs, helperVars] = createHelperVars(
  {
    verticalAlignment,
    horizontalAlignment,
    shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
  },
  componentName
);

const { shadowColor } = helperRefs;

const container = {
  ...helperTheme,

  [compVars.itemsGrow]: '0',
  [compVars.hostWidth]: '100%',
  [compVars.hostHeight]: 'auto',
  [compVars.boxShadow]: 'none',

  [compVars.backgroundColor]: globalRefs.colors.surface.main,

  [compVars.backgroundImage]: '', // we need to set a value to avoid inner containers from inheriting the parent's background image
  [compVars.backgroundPositionX]: 'center',
  [compVars.backgroundPositionY]: 'center',
  [compVars.backgroundSize]: 'cover',
  [compVars.backgroundRepeat]: 'no-repeat',

  [compVars.color]: globalRefs.colors.surface.contrast,
  [compVars.borderRadius]: '0px',
  [compVars.hostDirection]: globalRefs.direction,

  [compVars.borderStyle]: 'none',
  [compVars.borderWidth]: 'unset',
  [compVars.borderColor]: 'unset',

  verticalPadding: {
    sm: { [compVars.verticalPadding]: '5px' },
    md: { [compVars.verticalPadding]: '10px' },
    lg: { [compVars.verticalPadding]: '20px' },
  },

  horizontalPadding: {
    sm: { [compVars.horizontalPadding]: '5px' },
    md: { [compVars.horizontalPadding]: '10px' },
    lg: { [compVars.horizontalPadding]: '20px' },
  },

  direction: {
    row: {
      [compVars.flexDirection]: 'row',
      [compVars.alignItems]: helperRefs.verticalAlignment,
      [compVars.justifyContent]: helperRefs.horizontalAlignment,
      [compVars.flexWrap]: 'wrap',
      horizontalAlignment: {
        spaceBetween: {
          [helperVars.horizontalAlignment]: 'space-between',
        },
      },
    },
    column: {
      [compVars.flexDirection]: 'column',
      [compVars.alignItems]: helperRefs.horizontalAlignment,
      [compVars.justifyContent]: helperRefs.verticalAlignment,
      verticalAlignment: {
        spaceBetween: {
          [helperVars.verticalAlignment]: 'space-between',
        },
      },
    },
  },

  spaceBetween: {
    sm: { [compVars.gap]: '10px' },
    md: { [compVars.gap]: '20px' },
    lg: { [compVars.gap]: '30px' },
  },

  shadow: {
    sm: {
      [compVars.boxShadow]: `${globalRefs.shadow.wide.sm} ${shadowColor}, ${globalRefs.shadow.narrow.sm} ${shadowColor}`,
    },
    md: {
      [compVars.boxShadow]: `${globalRefs.shadow.wide.md} ${shadowColor}, ${globalRefs.shadow.narrow.md} ${shadowColor}`,
    },
    lg: {
      [compVars.boxShadow]: `${globalRefs.shadow.wide.lg} ${shadowColor}, ${globalRefs.shadow.narrow.lg} ${shadowColor}`,
    },
    xl: {
      [compVars.boxShadow]: `${globalRefs.shadow.wide.xl} ${shadowColor}, ${globalRefs.shadow.narrow.xl} ${shadowColor}`,
    },
    '2xl': {
      [helperVars.shadowColor]: '#00000050', // mimic daisyUI shadow settings
      [compVars.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${shadowColor}`,
    },
  },

  // we must add & to override the root container style (applied via the styles page)
  '&borderRadius': {
    sm: { [compVars.borderRadius]: globalRefs.radius.sm },
    md: { [compVars.borderRadius]: globalRefs.radius.md },
    lg: { [compVars.borderRadius]: globalRefs.radius.lg },
    xl: { [compVars.borderRadius]: globalRefs.radius.xl },
    '2xl': { [compVars.borderRadius]: globalRefs.radius['2xl'] },
    '3xl': { [compVars.borderRadius]: globalRefs.radius['3xl'] },
  },
};

export default container;

export const vars = {
  ...compVars,
  ...helperVars,
};
