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

import v from '../../styles/Variables';
import LabelText from '../Forms/LabelText';
import LabelRequired from '../Forms/LabelRequired';
import LabelOptional from '../Forms/LabelOptional';

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: (i: number) => number;
  /**
   * If true, will show an (optional) tag next to the title. If false or not supplied, nothing will show.
   */
  optional: boolean;

  /* Should the checkbox show as checked or not.
   */

  /**
   * Id for the radios
   */
  id: string;
  /**
   * An array of items to display on each button => [title, value, active, showRadio]
   */
  options: { title: string; value: string; active: boolean; showRadio: boolean; sr: string }[];
  /**
   * If true, will show an * next to the title. If false or not supplied, nothing will show.
   */
  required: boolean;
  /**
   * Classes to be added to the wrapping label.
   */
  theme: string;
  /**
   * The label text title of the input.
   */
  title: string;

  /**
   * A custom data attribute value you can pass to hook into the input if needed.
   */
}

interface ButtonProps {
  active: boolean;
}

const ButtonGroup = ({ callback, id = 'bg-radio', optional = false, options, required = true, theme, title }: Props) => {
  return (
    <Wrapper data-test="component-buttonGroup" className="nwc--button-group-title font--14">
      <LabelText title={title} />
      {title.length !== 0 && <LabelRequired show={required} />}
      {title.length !== 0 && <LabelOptional show={optional} />}
      {options.map((option, index) => {
        if (!option.title) return false;

        return (
          <LabelStyles key={index} htmlFor={`${id}-${index}`} className={`nwc--button-group ${theme} ${option.active ? 'active' : ''}`} active={option.active}>
            <input
              className="sr-only"
              type="radio"
              id={`${id}-${index}`}
              name={`nwc--button-group-${id}`}
              defaultValue={option.sr || option.title}
              checked={option.active}
              onChange={() => callback(index)}
            />{' '}
            {option.title}
          </LabelStyles>
        );
      })}
    </Wrapper>
  );
};

export default ButtonGroup;

/* styles */
const Wrapper = styled.section`
  width: 100%;
  display: flex;
`;

const LabelStyles = styled.label`
  background: ${v.colors.light};
  font-size: 16px;
  color: ${v.colors.dark};
  border: ${({ active }: ButtonProps) => (active ? `1px solid ${v.colors.dark}` : `1px solid ${v.colors.border}`)};
  box-shadow: ${({ active }: ButtonProps) => (active ? `0 3px 6px rgba(0,0,0,0.25)` : `none`)};
  padding: 10px 15px;
  text-align: right;
  display: inline-block;
  margin-left: -1px;
  width: 100%;
  height: auto;
  z-index: ${({ active }: ButtonProps) => (active ? 3 : 2)};
  line-height: 14px;
  transition: ${v.animate};
  position: relative;

  &:before {
    position: absolute;
    left: 5px;
    top: 12px;
    content: '';
    width: 25px;
    height: 25px;
    border: 1px solid rgba(0, 0, 0, 1);
    border-radius: 100px;
  }

  &.active:after {
    position: absolute;
    left: 8px;
    top: 15px;
    content: '';
    width: 19px;
    height: 19px;
    background-color: black;
    border-radius: 100px;
  }

  &:hover {
    background: ${v.colors.offLight};
  }

  &:nth-child(2) {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }

  &:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }

  small {
    color: ${v.colors.dark666};
    font-size: 12px;
  }
`;