import { css } from 'lit';
import componentStyles from '../../styles/component.styles.mjs';
import formControlStyles from '../../styles/form-control.styles.mjs';

const styles = css`
  ${componentStyles}
  ${formControlStyles}

  :host {
    display: inline-block;
    --switch-height: var(--flow-ui-toggle-size-medium);

    --switch-color: var(--flow-ui-switch-color, var(--flow-ui-color-neutral-400));
    --switch-border-color: var(--flow-ui-switch-border-color, var(--flow-ui-color-neutral-500));

    --switch-color-hover: var(--flow-ui-switch-color-hover, var(--flow-ui-color-neutral-400));
    --switch-border-color-hover: var(--flow-ui-switch-border-color-hover, var(--flow-ui-color-neutral-500));

    --switch-color-checked: var(--flow-ui-switch-color-checked, var(--flow-ui-color-primary-500));
    --switch-border-color-checked: var(--flow-ui-switch-border-color-checked, var(--flow-ui-color-primary-500));

    --thumb-color: var(--flow-ui-switch-thumb-color, var(--flow-ui-color-neutral-800));
    --thumb-border-color: var(--flow-ui-switch-thumb-border-color, var(--flow-ui-color-neutral-800));

    --thumb-color-hover: var(--flow-ui-switch-thumb-color-hover, var(--flow-ui-color-neutral-900));
    --thumb-border-color-hover: var(--flow-ui-switch-thumb-border-color-hover, var(--flow-ui-color-neutral-950));

    --thumb-color-checked: var(--flow-ui-switch-thumb-color-checked, var(--flow-ui-color-neutral-950));
    --thumb-border-color-checked: var(--flow-ui-switch-thumb-border-color-checked, var(--flow-ui-color-neutral-950));

    --thumb-size: calc(var(--flow-ui-toggle-size-medium));

    --switch-width: calc(var(--switch-height) * 1.8);
  }

  :host([help-text]) {
    margin-bottom: var(--flow-ui-spacing-x-small);
  }

  .form-control.form-control--small {
    --switch-height: var(--flow-ui-toggle-size-small);
    --switch-thumb-size: calc(var(--flow-ui-toggle-size-small));
    --switch-width: calc(var(--switch-height) * 1.8);
  }

  .form-control.form-control--large {
    --switch-height: var(--flow-ui-toggle-size-large);
    --switch-thumb-size: calc(var(--flow-ui-toggle-size-large));
    --switch-width: calc(var(--switch-height) * 1.8);
  }

  .form-control .form-control__input {
    align-items: center;
    background-color: transparent !important;
    border: none !important;
    margin-right: var(--flow-ui-spacing-small);
  }

  .switch__control {
    flex: 0 0 auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--switch-width);
    height: var(--switch-height);
    background-color: var(--switch-color);
    border: solid var(--flow-ui-control-border-width) var(--switch-border-color);
    border-radius: var(--switch-height);
    transition:
      var(--flow-ui-transition-fast) border-color,
      var(--flow-ui-transition-fast) background-color;
    cursor: pointer;
  }

  .switch__control .switch__thumb {
    width: var(--thumb-size);
    height: var(--thumb-size);
    background-color: var(--thumb-color);
    border-radius: 50%;
    border: solid var(--flow-ui-control-border-width) var(--thumb-border-color);
    translate: calc((var(--switch-width) - var(--switch-height)) / -2);
    transition:
      var(--flow-ui-transition-fast) translate ease,
      var(--flow-ui-transition-fast) background-color,
      var(--flow-ui-transition-fast) border-color,
      var(--flow-ui-transition-fast) box-shadow;
  }

  .switch__input {
    position: absolute;
    opacity: 0;
    padding: 0;
    margin: 0;
    pointer-events: none;
  }

  /* Hover */
  .form-control:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
    background-color: var(--switch-color-hover);
    border-color: var(--switch-border-color-hover);
  }

  .form-control:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {
    background-color: var(--thumb-color-hover);
    border-color: var(--thumb-border-color-hover);
  }

  /* Focus */
  .form-control:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
    outline: var(--flow-ui-focus-ring);
    outline-offset: var(--flow-ui-focus-ring-offset);
  }

  /* Checked */
  .switch--checked .switch__control {
    background-color: var(--switch-color-checked);
    border-color: var(--switch-border-color-checked);
  }

  .switch--checked .switch__control .switch__thumb {
    background-color: var(--thumb-color-checked);
    border-color: var(--thumb-border-color-checked);
    translate: calc((var(--switch-width) - var(--switch-height)) / 2);
  }

  .form-control.form-control--disabled .switch__control {
    cursor: not-allowed;
  }
`;

export { styles as default };
