import React from 'react';
import v from '../../styles/Variables';
import styled from 'styled-components';

interface Props {
  /**
   * A function that will run after the input  has changed, it will return the value of the input for you to use in the parent component.
   */
  callback: (value: string, e: object) => void;
  /**
   * Should the checkbox show as checked or not.
   */
  checked: boolean;
  /**
   * A custom data attribute value you can pass to hook into the input if needed.
   */
  dataAttr: string;
  /**
   * Should the input be disabled or not. Use with a state var to determine when the input can be edited.
   */
  disabled: boolean;
  /**
   * An id to be added to the input itself, not the wrapping label.
   */
  id: string;
  /**
   * Classes to be added to the wrapping label.
   */
  theme: string;
  /**
   * The label text title of the input.
   */
  title: string;
  /**
   * The value of the checkbox, will be accessible as part of "e" in the callback
   */
  value: string;
}

const Checkbox = ({ callback, checked, dataAttr, disabled, id, theme, title, value }: Props) => {
  return (
    <Label htmlFor={id} className={`nwc--checkbox ${theme}`} data-test="component-checkbox">
      <CheckStyles>
        <input
          data-attr={dataAttr}
          data-test="component-checkbox-input"
          defaultChecked={checked}
          disabled={disabled}
          onChange={(e) => callback(value, e)}
          type="checkbox"
          value={value}
          name={id}
          id={id}
        />
      </CheckStyles>
      <TextStyles>
        <TitleContainer>
          <span className="nwc--button-group-title-text">{title}</span>
        </TitleContainer>
      </TextStyles>
    </Label>
  );
};

export default Checkbox;

/* styles */
const Label = styled.label`
  display: block;
  padding-top: 6px;
  position: relative;
`;

const CheckStyles = styled.div`
  display: inline-block;
  position: absolute;
  top: 6px;
  height: 100%;
  align-content: center;
`;

const TextStyles = styled.div`
  display: inline-block;
  width: 95%;
  margin-left: 27px;
`;
const TitleContainer = styled.div`
  color: ${v.colors.dark};
  font-size: 18px;
  margin-bottom: 5px;
  display: inline-block;
`;