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;
}
}
}
}
}
}
`