import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef } from 'react';
import styled, { css } from 'styled-components';
import { LABEL_PREFIX, useFieldContext } from '../form/Form.component';
import { Stack, spacing } from '../../spacing';
import { Text } from '../text/Text.component';
const ToggleContainer = styled.span `
  display: inline-flex;
  align-items: center;
  position: relative;
  opacity: ${(props) => (props.disabled ? 0.5 : 1)};
`;
const Switch = styled.label `
  position: relative;
  width: ${spacing.r24};
  align-self: center;
  ${(props) => {
    return css `
      ${props.disabled
        ? `
          cursor: not-allowed;
        `
        : `
          cursor: pointer;
        `}
    `;
}}
`;
const Slider = styled.div `
  width: 100%;
  height: 1rem;
  background-color: ${(props) => props.theme.backgroundLevel1};
  border: ${spacing.r1} solid
    ${(props) => props.theme[props.toggle ? 'selectedActive' : 'infoPrimary']};
  border-radius: ${spacing.r8};
  transition: 0.4s;

  &:before {
    border-radius: 100%;
    position: absolute;
    content: '';
    height: ${spacing.r10};
    width: ${spacing.r10};
    left: 3px;
    top: 3.5px;
    background-color: ${(props) => props.theme[props.toggle ? 'textSecondary' : 'textPrimary']};
    transition: 0.4s;
  }
`;
const ToggleInput = styled.input `
  &:checked + ${Slider} {
    background-color: ${(props) => props.theme.selectedActive};
  }
  &:checked + ${Slider}:before {
    transform: translateX(${spacing.r10});
  }
  display: none;
`;
const StyledSwitchLabel = styled.label `
  color: ${(props) => props.theme[props.toggle ? 'textPrimary' : 'textPrimary']};
`;
function ToggleSwitch({ toggle, label, onChange, disabled, ...rest }) {
    const { isContextAvailable } = useFieldContext();
    const checkboxRef = useRef(null);
    return (_jsx(StyledSwitchLabel, { toggle: toggle, className: "text", id: `${rest['id']}-label`, htmlFor: rest['id'], children: _jsx(ToggleContainer, { className: "sc-toggle", disabled: disabled, children: _jsxs(Stack, { gap: 'r8', style: { alignItems: 'baseline' }, children: [_jsxs(Switch, { htmlFor: rest['id'], role: "checkbox", "aria-checked": toggle, tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, disabled: disabled, onKeyDown: (e) => {
                            if (e.code === 'Space' || e.code === 'Enter') {
                                e.preventDefault();
                                e.stopPropagation();
                                checkboxRef.current && checkboxRef.current.click();
                            }
                        }, "aria-labelledby": label
                            ? `${rest['id']}-label`
                            : isContextAvailable
                                ? `${LABEL_PREFIX}${rest['id']}`
                                : undefined, children: [_jsx(ToggleInput, { type: "checkbox", checked: toggle, onChange: onChange, disabled: disabled, ref: checkboxRef, ...rest }), _jsx(Slider, { className: "sc-slider", toggle: toggle })] }), label && _jsx(Text, { children: label })] }) }) }));
}
export const Toggle = ToggleSwitch;
