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

export const CL_CHECKBOX_LABEL = 'checkbox-label';

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

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

const CheckboxWrap = styled.div`
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
`;

const CheckboxStyled = styled.input`
  display: none;

  & + label {
    opacity: 0.5;
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 0 0 2px #4d4d4d;

    &::before {
      content: '';
      position: absolute;
      margin-top: -1px;
      width: 14px;
      height: 6px;
      box-shadow: inset 4px -4px 0 -2px #434343;
      transform: rotate(-45deg) scale(0.8);
      transition: transform 0.1s ease-out;
    };

    &:hover {
      opacity: 1;
    };
  };

  &:checked {
    & + label {
      opacity: 1;
      background-color: ${ONYX};
      box-shadow: none;

      &::before {
        box-shadow: inset 4px -4px 0 -2px ${LIGHT_SEA_GREEN};
        transform: rotate(-45deg) scale(1);
      };
    };
  };
`;

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

    return (
      <Wrap isHidden={isHidden} className={className}>
        {
          label &&
          <Label htmlFor={id} className={CL_CHECKBOX_LABEL}>{label}</Label>
        }
        {children}
        <CheckboxWrap>
          <CheckboxStyled
            checked={isChecked}
            type="checkbox"
            id={id}
            onChange={onChange}
          />
          <label htmlFor={id} />
        </CheckboxWrap>
      </Wrap>
    );
  }
}

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

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

export default Checkbox;
