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

const globalRefs = getThemeRefs(globals);
const compVars = DividerClass.cssVarList;

const [helperTheme, helperRefs, helperVars] = createHelperVars(
  {
    thickness: '2px',
    spacing: '10px',
  },
  componentName
);

const divider = {
  ...helperTheme,

  [compVars.hostDirection]: globalRefs.direction,
  [compVars.alignItems]: 'center',
  [compVars.flexDirection]: 'row',
  [compVars.alignSelf]: 'stretch',
  [compVars.hostWidth]: '100%',
  [compVars.stripeColor]: globalRefs.colors.surface.light,
  [compVars.stripeColorOpacity]: '0.5',
  [compVars.stripeHorizontalThickness]: helperRefs.thickness,
  [compVars.labelTextWidth]: 'fit-content',
  [compVars.labelTextMaxWidth]: 'calc(100% - 100px)',
  [compVars.labelTextHorizontalSpacing]: helperRefs.spacing,
  [compVars.textAlign]: 'center',

  _vertical: {
    [compVars.minHeight]: '200px',
    [compVars.flexDirection]: 'column',
    [compVars.hostWidth]: 'fit-content',
    [compVars.hostPadding]: `0 calc(${helperRefs.thickness} * 3)`,
    [compVars.stripeVerticalThickness]: helperRefs.thickness,
    [compVars.labelTextWidth]: 'fit-content',
    [compVars.labelTextMaxWidth]: '100%',
    [compVars.labelTextVerticalSpacing]: helperRefs.spacing,
  },
};

export default divider;

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