// Shell level
export const shellTheming = (ShellClass: string) =>
  `pi-shell pi-shell__${ShellClass}`;

/**
 * Tema visual de toda la app. Se aplica a un contenedor raíz (normalmente
 * `<body>`) y de él cuelga el aspecto de botones, cards, campos, etc.
 *
 * Dentro de un shell se puede forzar el aspecto contrario en un subárbol con
 * `.is-private` / `.is-public` (p. ej. el input `context` de `pi-card`).
 */
export const ShellClass = {
  /** Aspecto de aplicación: rellenos planos y sólidos, controles compactos. */
  Default: shellTheming('default'),
  /** Aspecto de marketing: degradados, brillo al hover y controles mayores. */
  Alternative: shellTheming('alternative'),
  /** Esquinas casi rectas, borde fino en vez de sombra, sin degradados. */
  Minimal: shellTheming('minimal'),
  /** Como Default, pero con anillo en degradado al enfocar un campo. */
  Gradient: shellTheming('gradient'),
};

// View component level
// Container Layout ~ Landings
export const ContainerLayout = 'pi-container-layout';

// Layouts
// Heights
export const enum Height {
  Small = 'small', // Mobile: 50, Tablet: 50, Desktop: 25
  Medium = 'medium', // Mobile: 100, Tablet: 75, Desktop: 50
  Large = 'large', // Mobile: 150, Tablet: 100, Desktop: 75
  Full = 'full', // Mobile: 200, Tablet: 150, Desktop: 100
}

export const height = (height: Height): string => `pi-layout__${height}`;

// Responsive
export const heights = (
  mobileHeight: Height,
  tabletHeight: Height,
  desktopHeight: Height,
): string =>
  `pi-layout__${mobileHeight}--mobile pi-layout__${tabletHeight}--tablet pi-layout__${desktopHeight}--desktop`;

// Not Responsive
export const LayoutHeight = {
  Small: height(Height.Small), //  25
  Medium: height(Height.Medium), // 50
  Large: height(Height.Large), // 75
  Full: height(Height.Full), // 100
};

// HostBinding layout class with or without background image ~ Landings
export const layoutBackground = (imageName: string) =>
  `url(https://d2m4265u67f2xu.cloudfront.net/assets/images/${imageName})`;

export const backgroundWaveClass = (waveRef: string) =>
  `pi-background-wave pi-background-wave__${waveRef}`;

// Not Responsive
export const LayoutWave = {
  // Grey
  Grey1: backgroundWaveClass('01-grey'),
  Grey1RGBA: backgroundWaveClass('01-grey-rgba'),
  Grey2: backgroundWaveClass('02-grey'),
  Grey2RGBA: backgroundWaveClass('02-grey-rgba'),
  // Highlighted
  Highlighted1: backgroundWaveClass('01-highlighted'),
  Highlighted1RGBA: backgroundWaveClass('01-highlighted-rgba'),
  Highlighted2: backgroundWaveClass('02-highlighted'),
  Highlighted2RGBA: backgroundWaveClass('02-highlighted-rgba'),
  // Primary
  Primary1: backgroundWaveClass('01-primary'),
  Primary1RGBA: backgroundWaveClass('01-primary-rgba'),
  Primary2: backgroundWaveClass('02-primary'),
  Primary2RGBA: backgroundWaveClass('02-primary-rgba'),
  // PrimaryWhite
  PrimaryWhite1: backgroundWaveClass('01-primary-white'),
  PrimaryWhite1RGBA: backgroundWaveClass('01-primary-white-rgba'),
  PrimaryWhite2: backgroundWaveClass('02-primary-white'),
  PrimaryWhite2RGBA: backgroundWaveClass('02-primary-white-rgba'),
  // Primary50
  PrimaryPrimary501: backgroundWaveClass('01-primary-primary-50'),
  Primary501: backgroundWaveClass('01-primary-50'),
  PrimaryPrimary501RGBA: backgroundWaveClass('01-primary-primary-50-rgba'),
  PrimaryPrimary502: backgroundWaveClass('02-primary-primary-50'),
  Primary502: backgroundWaveClass('02-primary-50'),
  PrimaryPrimary502RGBA: backgroundWaveClass('02-primary-primary-50-rgba'),
  // White
  White1: backgroundWaveClass('01-white'),
  White1RGBA: backgroundWaveClass('01-white-rgba'),
  White2: backgroundWaveClass('02-white'),
  White2RGBA: backgroundWaveClass('02-white-rgba'),
};

// Layouts ~ SaaS & Landings
export const LayoutNoPadding = 'pi-layout__no-padding';

export const LayoutCollapsable = 'pi-layout__collapsable';

export const userType = (userType: string) => `is-${userType}`;

// User type class
export const UserTypeClass = {
  // Company
  Company: userType('company'),
  // Investor
  Investor: userType('investor'),
  // Advisor
  Advisor: userType('advisor'),
};

// Layouts (Add to any view)
export const LayoutTypeClass = {
  // Specifics
  //
  // Authentication y Dashboard son composiciones de aplicación (estados del
  // aside, tipos de usuario): la capa genérica no trae su CSS, lo aporta la app
  // que los use. Ver la página «Layouts» del playground.
  Authentication: 'pi-layout pi-layout__00-authentication',
  Dashboard: 'pi-layout pi-layout__01-dashboard',
  // TODO: Delete old dashboard layout when ready other users
  DashboardOld: 'pi-layout pi-layout__main pi-layout__01-dashboard-old',
  // Main Horizontally
  // Full Width
  FullWidth: 'pi-layout pi-layout__main pi-layout__02-full-width',
  // Full Width Centered
  // El modificador es `02-full-width--auto`, no `02a-...`: así lo espera
  // `_pi-02a-full-width-auto-layout.scss`. Con el nombre antiguo la constante
  // no casaba con ningún selector y el `margin: auto` nunca se aplicaba.
  FullWidthAuto:
    'pi-layout pi-layout__main pi-layout__02-full-width pi-layout__02-full-width--auto',
  // Main Vertically Centered
  VerticallyCentered: 'pi-layout pi-layout__03-vertically-centered',
  // Main Space Between
  SpaceBetween: 'pi-layout pi-layout__04-space-between',
  // Splitted
  Splitted: 'pi-layout pi-layout__05-splitted',
  // SplittedPaywall
  SplittedPaywall:
    'pi-layout pi-layout__05-splitted pi-05a-splitted-paywall-layout',
  // Edge to Edge
  EdgeToEdge: 'pi-layout pi-layout__06-edge-to-edge',
  // List Left
  List: 'pi-layout pi-layout__07-list',
  // Infinite Scroll
  ListAuto: 'pi-layout pi-layout__07-list pi-layout__07a-list--auto',
  // Form Layout
  Form: 'pi-layout pi-layout__08-form',
  // Pricing Layout
  Pricing: 'pi-layout pi-layout__09-pricing',
};

// Wrappers
export const wrapperType = (wrapperClass: string) =>
  `pi-wrapper pi-wrapper__${wrapperClass}`;

export const WrapperTypeClass = {
  Action: wrapperType('action'),
  Form: wrapperType('form'),
  Header: wrapperType('header'),
  List: wrapperType('list'),
  Main: wrapperType('main'),
  Steps: wrapperType('steps'),
};

// Components
export const componentFamily = (componentClass: string) =>
  `pi-component pi-${componentClass}`;

export const ComponentFamilyClass = {
  Button: componentFamily('button'),
  Card: componentFamily('card'),
  Carousel: componentFamily('carousel'),
  DomainComponent: componentFamily('domain-component'),
  Chip: componentFamily('chip'),
  DynamicMenu: componentFamily('dynamic-menu'),
  FileUpload: componentFamily('file-upload'),
  Field: componentFamily('field'),
  Icon: componentFamily('icon'),
  Image: componentFamily('image'),
  List: componentFamily('list'),
  CustomModal: componentFamily('modal pi-modal__custom-template'),
  Panel: componentFamily('panel'),
  Table: componentFamily('table'),
  Text: componentFamily('text'),
};

// Transition durations
export const enum DURATION {
  Slow = 300,
  Medium = 200,
  Fast = 100,
}