import { CSSProperties, css } from 'glamor';
import { useApphouse } from '../../context/useApphouse';
import React, { useState } from 'react';
import { setAlpha } from '../../utils/color/setAlpha';
import { useLocalStyles } from '../../styles/defaults/useLocalStyles';
import { ApphouseComponent } from '../component.interfaces';
import { toRems } from '../../utils/units/toRems';
/**
 * Interface for the styles of the ButtonToggle component
 */
export interface ButtonToggleStyles {
  switch?: CSSProperties;
  input?: CSSProperties;
  slider?: CSSProperties;
}
/**
 * Interface for the ButtonToggle component props
 */
export interface ButtonToggleProps
  extends ApphouseComponent<ButtonToggleStyles> {
  /**
   * The value of the toggle.
   */
  value?: boolean;
  /**
   * The label of the toggle.
   */
  label?: string;
  /**
   * The id of the toggle.
   */
  id: string;
  /*
   * The function to call when the toggle is toggled
   */
  onChange?: () => void;
  /**
   * The scale of the toggle.
   * @default 1
   * @beta
   */
  scale?: number;
  /**
   * The color of the toggle when it is on.
   * @default theme.colors.brand
   */
  toggleOnColor?: string;
}

export const ButtonToggle: React.FC<ButtonToggleProps> = ({
  value = false,
  onChange,
  label,
  scale = 1,
  toggleOnColor,
  id,
  styleOverwrites
}) => {
  const [selected, setSelected] = useState<boolean>(value || false);
  const store = useApphouse();
  const theme = store.theme;
  const backgroundColor = setAlpha(theme.colors.onSurface, 0.2);

  const componentStyles: ButtonToggleStyles = {
    switch: {
      fontSize: '17px',
      position: 'relative',
      display: 'inline-block',
      width: `${scale * 3.5}em`,
      height: `${scale * 2}em`
    },
    input: {
      opacity: 0,
      width: 0,
      height: 0,
      ':checked + .ah-slider': {
        backgroundColor: backgroundColor,

        ':before': {
          transform: 'translateX(1.5em)',
          backgroundColor: toggleOnColor || theme.colors.brand
        }
      },
      ':focus + .ah-slider': {
        boxShadow: `0 0 1px ${backgroundColor}`
      }
    },
    slider: {
      position: 'absolute',
      cursor: 'pointer',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: setAlpha(theme.colors.onSurface, 0.1),
      transition: '.4s',
      borderRadius: `${toRems(30)}`,
      ':before': {
        position: 'absolute',
        content: '""',
        height: `${scale * 1.4}em`,
        width: `${scale * 1.4}em`,
        borderRadius: '20px',
        left: `${scale * 0.3}em`,
        bottom: `${scale * 0.3}em`,
        backgroundColor: theme.colors.onSurface,
        transition: '.4s'
      }
    }
  };
  const localStyles = useLocalStyles(componentStyles, styleOverwrites);

  return (
    <label
      {...css(localStyles.switch)}
      data-xray="ButtonToggle"
      data-style="switch"
      aria-label={label}
    >
      <input
        id={id}
        type="checkbox"
        {...css(localStyles.input)}
        checked={selected}
        onChange={() => {
          setSelected(!selected);
          onChange && onChange();
        }}
        data-style="input"
      />
      <span
        {...css(localStyles.slider)}
        className="ah-slider"
        data-style="slider"
      ></span>
    </label>
  );
};