import React from "react";
import styled from "styled-components";
import colors from "@theme/colors";

const Container = styled.label`
  display: block;
  position: relative;
  padding-left: 2rem;
  cursor: pointer;
  font-size: 1.5rem; /* 24px */
  user-select: none;

  /* On mouse-over, add a grey background color */
  &:hover input ~ .custom-cbox {
    background-color: #d4d0c7; /* grey1 */
  }
`;

/* Hide the browser's default checkbox */
const HiddenDefaultElement = styled.input`
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
`;

/* Create a custom checkbox */
const CustomCBoxElement = styled.span<{ checked?: boolean }>`
  border-radius: 4px;
  position: absolute;
  top: 0;
  left: 0;
  height: 1em;
  width: 1em;
  background-color: ${(props) => (props.checked ? colors.blue1 : colors.grey2)};

  &:focus &::before {
    transition: box-shadow 150ms ease;
    content: '';
    display: block;
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: -4px;
    right: -4px;
    border-radius: 6px;
    border: 2px solid ${colors.blue1};
  }
`;

const Checkmark = styled.div`
  position: absolute;
  left: 0.375em;
  top: calc(0.25em - 1px);
  width: 0.25em;
  height: 0.5em;
  border: solid #fff;
  border-width: 0 0.125em 0.125em 0;
  transform: rotate(45deg);
`;

type CheckboxProps = Omit<
React.InputHTMLAttributes<HTMLInputElement>,
"type"
>;

const Checkbox: React.FC<CheckboxProps> = ({ children, checked, ...props }) => (
  <Container>
    {children}
    <HiddenDefaultElement
      type="checkbox"
      checked={checked}
      {...props}
      tabIndex={-1}
    />
    <CustomCBoxElement tabIndex={0} checked={checked} className="custom-cbox">
      {checked && (<Checkmark />)}
    </CustomCBoxElement>
  </Container>
);

export default Checkbox;