import React from 'react';
import styled, { css } from 'styled-components';

export type SwitchProps = {
  value: boolean;
  onChange: (value: boolean) => void;
  disabled?: boolean;
};

export function Switch({ value = false, disabled = false, onChange }: SwitchProps): JSX.Element {
  const handleClick = () => {
    if (disabled) return;
    onChange(!value);
  };

  return (
    <SwitchWrapper onClick={handleClick} role="switch" selected={value} disabled={disabled}>
      <Knob selected={value} />
    </SwitchWrapper>
  );
}

const SwitchWrapper = styled.div<{ selected: boolean; disabled: boolean }>`
  width: var(--switch-width);
  height: var(--switch-height);
  border-radius: var(--switch-border-radius);
  background-color: ${({ selected, disabled }) =>
    disabled
      ? 'var(--switch-bg-color-disabled)'
      : selected
        ? 'var(--switch-bg-color-selected)'
        : 'var(--switch-bg-color)'};
  display: flex;
  align-items: center;
  padding: var(--switch-padding);
  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
  transition: var(--switch-bg-transition);

  ${({ disabled }) =>
    !disabled &&
    css`
      &:hover {
        background-color: var(--switch-bg-color-hover);
      }
    `}

  &:active {
    background-color: var(--switch-bg-color-pressed);
  }
`;

const Knob = styled.div<{ selected: boolean }>`
  width: var(--switch-knob-width);
  height: var(--switch-knob-height);
  border-radius: var(--switch-knob-border-radius);
  background-color: ${({ selected }) =>
    selected ? 'var(--switch-knob-bg-color-selected)' : 'var(--switch-knob-bg-color)'};
  transform: ${({ selected }) =>
    selected ? 'translateX(var(--switch-knob-width))' : 'translateX(0)'};
  transition: var(--switch-knob-transition);
`;