import React from 'react'
import styled from 'styled-components'
import { useBubblesApi } from '../../../hooks/useBubblesApi'
import { PATCH, PATH_BUBBLES, PUT } from '../../../utility/constants/path'
import { DONE, PENDING } from '../../../utility/constants/util'

export default function RoundedCheckbox({ id, checked }) {
  const callBubblesApi = useBubblesApi({ imperative: true })

  const onCheckClick = async () => {
    const status = checked ? DONE : PENDING
    const { err, msg, data } = await callBubblesApi({
      verb: PATCH,
      path: `${PATH_BUBBLES}/${id}?status=${status}`
    })
    err ? alert(msg) : console.log(data)
  }

  return (
    <StyledRoundedCheckbox>
      <div className="container">
        <div className="round">
          <input
            type="checkbox"
            id={id}
            checked={checked}
            onClick={onCheckClick}
          />
          <label htmlFor={id}></label>
        </div>
      </div>
    </StyledRoundedCheckbox>
  )
}

const StyledRoundedCheckbox = styled.div`
  .round {
    position: relative;
    label {
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 50%;
      cursor: pointer;
      height: 28px;
      left: 0;
      position: absolute;
      top: 0;
      width: 28px;
      &:after {
        border: 2px solid #fff;
        border-top: none;
        border-right: none;
        content: '';
        height: 2px;
        left: 4px;
        opacity: 0;
        position: absolute;
        top: 5px;
        transform: rotate(-45deg);
        width: 6px;
      }
    }
    input[type='checkbox'] {
      visibility: hidden;
      &:checked {
        + {
          label {
            background-color: #66bb6a;
            border-color: #66bb6a;
            &:after {
              opacity: 1;
            }
          }
        }
      }
    }
  }
`