import React from 'react';
import styled from 'styled-components';

import { imagesAssetsBaseUrl } from '../../../Theme/Vars';
import ApoliticalBrand from '../../../Theme/ApoliticalBrand';

const { color } = ApoliticalBrand;

const CheckboxContainer = styled.div`
 height: fit-content;
 display: flex;
 flex-wrap: wrap;
 flex-direction: row;
`;
const Box = styled.input`
-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;
border: 1px solid ${color.lightDarkGrey};
border-radius: 4px;
width: 24px;
height: 24px;

&:focus{
  border: 3px solid ${color.focusTeal};
  outline: none;
}
&:hover{
  background-color: ${color.whiteTwo}
  background-image: url(${imagesAssetsBaseUrl}signup/checkmark.svg);
  background-repeat: no-repeat;
  background-position: center;
;
}
&:checked{
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background-color: ${color.focusTeal};
  background-image: url(${imagesAssetsBaseUrl}signup/checkmark.svg);
  background-repeat: no-repeat;
  background-position: center;
}



`;
const Label = styled.label`
font-size: 1.6rem;
font-weight: 300;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: ${color.secondary};
margin-top: 6px;
margin-left: 10px;
max-width: 256px;
`;
type Props = {|
    /** Function that does something when checkbox is checked/unchecked */
    onCheck?: ?any,
    /** Text for label, can also be a div, link, special styling etc */
    +labelChildren: ?any,
    /** Name, for accessibility. */
    +name: string,
    /** Allows style overriding */
    +className?: string,
    /** Is this a required checkbox? */
    required: ?any,
    /** Value, optional parameter */
    +value?: any,
    inputRef?: any,
|}

const Checkbox = ({
  onCheck, labelChildren, name, className, required, value, inputRef, ...props
} :Props) => (
  <>
    <CheckboxContainer className={className}>
      <Box type="checkbox" className="gtm-trackable" name={name} id={name} onClick={onCheck} required={required} value={value} ref={inputRef} {...props} />
      <Label htmlFor={name}>
        { labelChildren }
      </Label>
    </CheckboxContainer>
  </>
);

Checkbox.defaultProps = {
  onCheck() {},
  className: '',
  value: 'on',
  inputRef: {},
};

export default Checkbox;