import React from 'react';
import { bool, string, func } from 'prop-types';
import styled from 'styled-components';
import { REM_UNIT_MD, LIGHT_SEA_GREEN, QUICK_SILVER, ARSENIC } from '@vincent_za/styles';

const Wrap = styled.div`
  display: ${props => props.isHidden ? 'none' : 'flex'};
`;

const Label = styled.label`
  margin-right: ${REM_UNIT_MD};
`;

const SwitchWrap = styled.div`
  position: relative;
  width: 30px;
  height: 12px;
  display: flex;
  background-color: ${ARSENIC};
  border-radius: 10px;
  align-items: center;
`;

const SwitchStyled = styled.input`
  display: none;

  & + label {
    background-color: ${QUICK_SILVER};
    transition: background-color 0.1s ease-out, box-shadow 0.2s ease-out;
    height: 18px;
    width: 18px;
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
  }

  &:checked + label {
    background-color: ${LIGHT_SEA_GREEN};
    right: 0;
  }
`;

class Switch extends React.PureComponent {
  render() {
    const {
      isChecked,
      isHidden,
      label,
      className,
      id,
      onChange,
    } = this.props;

    return (
      <Wrap isHidden={isHidden} className={className} onClick={onChange}>
        {
          label &&
          <Label htmlFor={id}>{label}</Label>
        }
        <SwitchWrap>
          <SwitchStyled
            checked={isChecked}
            type="checkbox"
            id={id}
            readOnly
          />
          <label htmlFor={id} />
        </SwitchWrap>
      </Wrap>
    );
  }
}

Switch.propTypes = {
  isChecked: bool,
  isHidden: bool,
  label: string,
  className: string,
  id: string,
  onChange: func,
};

Switch.defaultProps = {
  isChecked: false,
  isHidden: false,
  label: undefined,
  className: '',
  id: undefined,
  onChange() {},
};

export default Switch;
