import React from 'react';
import { Shelf } from '../Layout';
import PropTypes from 'prop-types';
import useControlProp from '../../hooks/useControlProp';
import cx from 'classnames';
import styled from '@emotion/styled';
import style from './Toggle.module.scss';

const StyledShelf = styled(Shelf)(({ theme, toggleColor }) => ({
  button: {
    ':after': {
      backgroundColor: theme.colors[toggleColor] || toggleColor,
    },
  },
}));

const Toggle = ({
  toggleOn,
  handleToggle: toggle,
  defaultToggle = false,
  toggleColor = 'Dark Neutral 1',
}) => {
  const [isOn, setToggle] = useControlProp(toggleOn, toggle, defaultToggle);

  function handleToggle(toggled) {
    setToggle(!toggled);
  }

  return (
    <StyledShelf toggleColor={toggleColor} className={cx(style.toggle, isOn && style.on)}>
      <button onClick={() => handleToggle(isOn)} />
    </StyledShelf>
  );
};

export default Toggle;

Toggle.propTypes = {
  label: PropTypes.string,
};