import { css } from 'styled-components';
import { VariantOfType } from '../../variants';
import { LabelCss } from '../label/label.variants';

export const CheckboxCss = css`
  position: relative;
`;

export const CheckboxInputCss = css`
  appearance: none;
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;

  &:disabled {
    cursor: not-allowed;
  }
`;

export const CheckboxIconCss = css`
  margin-right: 0.5rem;
  pointer-events: none;
  outline: 2px solid transparent;
  outline-offset: 1px;
  transition: outline-color 150ms ease-in 0s, color 200ms ease-out 0s;
  color: var(--form-border-color-hover);

  input:checked ~ & {
    color: var(--form-outline-color-active);
  }

  input:not(:disabled):hover ~ & {
    outline-color: var(--form-border-color-hover);
  }

  input:focus ~ & {
    outline-color: var(--form-outline-color-focus);
  }
`;

export const CheckboxCheckedCss = css`
  width: 24px;
  height: 24px;
  display: none;

  input:checked ~ & {
    display: block;
  }
`;

export const CheckboxUncheckedCss = css`
  width: 24px;
  height: 24px;
  display: block;

  input:checked ~ & {
    display: none;
  }
`;

export const CheckboxGroupCss = css`
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;

  .checkbox__groupLabel {
    flex: 1 0 100%;
  }

  .label {
    flex: 0 0 auto;
    width: auto;
  }
`;

export const CheckboxGroupLabelCss = LabelCss;

export const checkboxVariants = {
  default: {
    checkbox: CheckboxCss,
    checked: CheckboxCheckedCss,
    group: CheckboxGroupCss,
    groupLabel: CheckboxGroupLabelCss,
    icon: CheckboxIconCss,
    input: CheckboxInputCss,
    unchecked: CheckboxUncheckedCss,
  },
};

export type ICheckboxVariants = VariantOfType<typeof checkboxVariants>;