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

export const RadioCss = css`
  position: relative;
  margin-right: 0.5rem;
`;

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

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

export const RadioIconCss = css`
  border-radius: 50%;
  pointer-events: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
  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 RadioCheckedCss = css`
  width: 24px;
  height: 24px;
  display: none;

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

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

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

export const RadioGroupCss = css`
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0.35em;
`;

export const RadioGroupLabelCss = LabelCss;

export const radioVariants = {
  default: {
    radio: RadioCss,
    checked: RadioCheckedCss,
    group: RadioGroupCss,
    groupLabel: RadioGroupLabelCss,
    icon: RadioIconCss,
    input: RadioInputCss,
    unchecked: RadioUncheckedCss,
  },
};

export type IRadioVariants = VariantOfType<typeof radioVariants>;