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

export const Checkbox = ({
  checked,
  type,
  label,
  name,
  className,
  onchange,
  ...props
}) => {
  return (
    <CheckWrapper className={className}>
      <input
        onChange={e => onchange(e.target.value)}
        checked={checked}
        {...props}
        type={type}
        name={name}
      />
      <span>{label}</span>
    </CheckWrapper>
  );
};
export const CheckboxProfile = ({ type, onclick, label, name, checked }) => {
  return (
    <CheckWLabel>
      <input onClick={onclick} type={type} name={name} checked={checked} />
      <span>{label}</span>
    </CheckWLabel>
  );
};
export const CheckboxWOlabel = ({ type, name, props }) => {
  return (
    <CheckWLabel className="check-wo-label">
      <input {...props} type={type} name={name} />
      <span></span>
    </CheckWLabel>
  );
};
export const CheckboxWImage = ({
  label,
  category,
  type,
  image,
  className,
  onchange,
  ...props
}) => {
  return (
    <CheckWImg className={className} image={image}>
      <div onClick={e => onchange(e.target.value)} className="info-dtls">
        <div className="img-container"></div>
        <input type={type} name={category} {...props} />
        <p>{label}</p>
      </div>
    </CheckWImg>
  );
};

export const CustomCheckBox = ({
  type,
  label,
  name,
  className,

  checked,
  ...props
}) => {
  return (
    <CheckWrapper style={{ marginBottom: '20px' }} className={className}>
      <input checked={checked} {...props} type={type} name={name} />
      <span>{label}</span>
    </CheckWrapper>
  );
};

export const CustomMultiSelectBox = ({
  type,
  label,
  value,
  name,
  checked,
  onchange,
  className,
  ...props
}) => {
  return (
    <MultiSelectWrapper style={{ marginBottom: '20px' }} className={className}>
      <input
        value={value}
        {...props}
        onClick={e => onchange(e.target.value)}
        type={type}
        checked={checked}
        name={name}
      />
      <span>{label}</span>
    </MultiSelectWrapper>
  );
};

export const CheckboxWlabel = ({
  type,
  label,
  name,
  checked,
  onchange,
  ...props
}) => {
  return (
    <CheckWLabel>
      <input
        onChange={onchange ? () => onchange() : ''}
        checked={checked}
        type={type}
        name={name}
        {...props}
      />
      <span>{label}</span>
    </CheckWLabel>
  );
};

export const CustomCheckboxWlabel = ({
  type,
  label,
  name,
  checked,
  value,
  onchange,
  ...props
}) => {
  return (
    <CheckWLabel className="custom">
      <input
        onChange={e => onchange(e.target.checked)}
        type={type}
        value={value}
        checked={checked}
        name={name}
        {...props}
      />
      <span>{label}</span>
    </CheckWLabel>
  );
};

export const CheckboxWHeading = ({
  title,
  responseCount,
  email,
  category,
  type,
  className,
}) => {
  return (
    <AvatarWTextHeading className={className}>
      <input type={type} name={category} />
      <div className="info-dtls">
        <div className="name-info">
          <h4>{title}</h4>
          {responseCount ? <p>{responseCount} responses</p> : ''}
          {email ? <p>{email}</p> : ''}
        </div>
      </div>
    </AvatarWTextHeading>
  );
};

export const CustomCheckWHeading = ({
  title,
  responseCount,
  email,
  onchange,
  category,
  type,
  checked,
  className,
  onclick,
  ...props
}) => {
  return (
    <AvatarWTextHeading onclick={() => onclick()} className={className}>
      <input
        onChange={onchange}
        checked={checked}
        {...props}
        type={type}
        name={category}
      />
      <div className="info-dtls">
        <div className="name-info">
          <h4>{title}</h4>
          {responseCount ? <p>{responseCount} responses</p> : '0 response'}
          {email ? <p>{email}</p> : ''}
        </div>
      </div>
    </AvatarWTextHeading>
  );
};

const CheckWrapper = styled.label`
  position: relative;
  border-radius: 4px;
  display: block;
  z-index: 1;

  input {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
  }
  span {
    display: block;
    width: 100%;
    padding: 1.2rem 4.5rem;
    border-radius: 4px;
    font-size: 1.6rem;
    text-transform: none;
    &:first-letter {
      text-transform: uppercase;
    }

    &:before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      border: 1px solid transparent;
      background: #f7f7f8;
      border-radius: 4px;
      z-index: -1;
      transition: all 0.3s ease;
    }
    &:after {
      content: '';
      position: absolute;
      width: 22px;
      height: 22px;
      left: 1.5rem;
      top: 50%;
      transform: translateY(-50%);
      background: #c5c9da;
      border-radius: 50%;
      border: 6px solid transparent;
      transition: all 0.3s ease;
    }
  }
  input:checked ~ span:after {
    background: #ffffff;
    border: 6px solid #004bff;
  }
  input:checked ~ span:before {
    background: #ffffff;
    border: 1px solid #004bff;
  }
  &.alt {
    span:before {
      border: none;
      background: transparent;
    }
    input:checked ~ span:before {
      background: #ffffff;
      border: none;
    }
  }
`;

const MultiSelectWrapper = styled.label`
  position: relative;
  border-radius: 4px;
  display: block;
  z-index: 1;

  input {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
  }
  span {
    display: block;
    width: 100%;
    padding: 1.2rem 4.5rem;
    border-radius: 4px;
    font-size: 1.6rem;
    text-transform: none;
    &:first-letter {
      text-transform: uppercase;
    }

    &:before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      border: 1px solid transparent;
      background: #f7f7f8;
      border-radius: 4px;
      z-index: -1;
      transition: all 0.3s ease;
    }
    &:after {
      content: '';
      position: absolute;
      width: 22px;
      height: 22px;
      left: 1.5rem;
      top: 50%;
      transform: translateY(-50%);
      background: #c5c9da;
      border: 6px solid transparent;
      transition: all 0.3s ease;
    }
  }
  input:checked ~ span:after {
    background: #ffffff;
    border: 6px solid #004bff;
  }
  input:checked ~ span:before {
    background: #ffffff;
    border: 1px solid #004bff;
  }
  &.alt {
    span:before {
      border: none;
      background: transparent;
    }
    input:checked ~ span:before {
      background: #ffffff;
      border: none;
    }
  }
`;

const CheckWLabel = styled.label`
  position: relative;
  display: block;
  z-index: 1;
  cursor: pointer;
  &:hover {
    cursor: pointer;
    span {
      color: #004bff;
    }
  }
  &.check-wo-label {
    span {
      width: 18px;
      height: 18px;
      padding-left: 0;
      &:before {
        left: 0;
      }
    }
  }

  input {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
  }
  span {
    display: block;
    width: 100%;
    padding-left: 4.5rem;
    border-radius: 4px;
    font-size: 1.6rem;
    text-transform: none;
    &:first-letter {
      text-transform: uppercase;
    }
    &:before {
      content: '';
      position: absolute;
      width: 18px;
      height: 18px;
      left: 1.5rem;
      top: 50%;
      transform: translateY(-50%);
      background: #c5c9da;
      border-radius: 2px;
      border: 1.5px solid #c5c9da;
      transition: background-color 0.3s ease;
      background: #c5c9da;
    }
  }
  input:checked ~ span:before {
    background: #004bff url(/images/check.svg) no-repeat center;
    background-size: 10px 10px;
    border: 1.5px solid #004bff;
  }
  &.custom {
    span {
      padding-left: 3.5rem;
      font-size: 1.4rem;
      font-weight: 600;
      &:before {
        left: 0rem;
      }
    }
    &:hover {
      span {
        color: #61677c;
      }
    }
  }
  input[type='radio'] {
    z-index: 3;
  }
  input[type='radio'] ~ span {
    padding-left: 35px;
  }
  input[type='radio'] ~ span:before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    left: 0.5rem;
    top: 50%;
    border: 1px solid transparent;
    background: #f7f7f8;
    border-radius: 50%;
    z-index: -1;
    transition: all 0.3s ease;
  }
  input[type='radio'] ~ span:after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: #c5c9da;
    border-radius: 50%;
    border: 6px solid transparent;
    transition: all 0.3s ease;
  }
  input[type='checkbox']:checked ~ span:before {
    background: #004bff url(/images/check.svg) no-repeat center;
    background-size: 10px;
    border: 1.5px solid #004bff;
  }
  input[type='radio']:checked ~ span:before {
    background: #ffffff;
    border: 1px solid #004bff;
  }
  input[type='radio']:checked ~ span:after {
    background: #ffffff;
    border: 6px solid #004bff;
  }
`;
const AvatarWTextHeading = styled.label`
  position: relative;
  display: block;
  .name-info {
    h4 {
      font-family: var(--ff-medium);
      font-weight: 500;
      color: #0a1045;
      font-size: 1.6rem;
      text-transform: capitalize;
      margin-left: 0;
    }
    p {
      font-family: var(--ff-body);
      font-weight: 400;
      font-size: 1.4rem;
      margin-top: 0rem;
    }
  }
  input {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: red;
    opacity: 0;
  }
  .info-dtls {
    padding-left: 4rem;
    &:before {
      content: '';
      position: absolute;
      width: 18px;
      height: 18px;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      background: #c5c9da;
      border-radius: 2px;
      border: 1.5px solid #c5c9da;
      transition: background-color 0.3s ease;
      background: #c5c9da;
    }
  }
  input:checked ~ .info-dtls:before {
    background: #004bff url(/images/check.svg) no-repeat center;
    background-size: 10px;
    border: 1.5px solid #004bff;
  }
`;
const CheckWImg = styled.div`
   position: relative;
   border-radius: 4px;
   border: 1px solid #E8EDFF;
    input{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0;
        z-index: 2;
    }
    .info-dtls{
        padding: 0.6rem;
        .img-container{
            width: 100%;
            height: 125px;
            border-radius: 8px;
            background: ${props => `url(${props.image})`};
            background-size: 100%;
            background-position: center;
            background-repeat: no-repeat;
        }
        p{
          position: relative;
          margin-top: 1rem;
          padding-left: 27px;
          color: #61677C;
          font-size: 16px;
          font-family: var(--ff-medium);
          &:before{
              content: "";
              position: absolute;
              width: 18px;
              height: 18px;
              left: 0rem;
              top: 50%;
              transform: translateY(-50%);
              background: #C5C9DA;
              border-radius: 2px;
              transition: background-color 0.3s ease;
      }

  }
  input[type='radio'] ~ p{
      padding-left: 35px;
  }
  input[type='radio'] ~ p:before{
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      border: 1px solid transparent;
      background: #F7F7F8;
      border-radius: 4px;
      z-index: -1;
      transition: all 0.3s ease;
  }
  input[type='radio'] ~ p:after{
      content: "";
      position: absolute;
      width: 22px;
      height: 22px;
      left: 0.5rem;
      top: 50%;
      transform: translateY(-50%);
      background: #C5C9DA;
      border-radius: 50%;
      border: 6px solid transparent;
      transition: all 0.3s ease;
  }
  input[type='checkbox']:checked ~ p:before{
      background: #004BFF url(/images/check.svg) no-repeat center;
      background-size: 10px;
      border: 1.5px solid #004BFF;
  }
  input[type='radio']:checked ~ p:before{
      background: #ffffff;
      border: 1px solid #004BFF;
  }
  input[type='radio']:checked ~ p:after{
      background: #ffffff;
      border: 6px solid #004BFF;
  }

`;
