import React from 'react';
import { ToastContainer, toast, Slide } from "react-toastify";
import { HelpIcon } from "../icons";
import styled, { createGlobalStyle } from "styled-components";

const PrivacyCheck = ({ setIsPrivate, isPrivate, title, toastText }) => {
  return (
    <>
      <GlobalStyle />
      <Divider>
        <Flex>
          <PublicCheckbox
            id="checkbox"
            type="checkbox"
            onChange={() => setIsPrivate((bool) => !bool)}
            checked={isPrivate}
          />
          <PrivateLabel htmlFor="checkbox">
            Make {title} private{" "}
            <IconWrap
              type="button"
              onClick={() =>
                toast.info(
                  toastText,
                  {
                    toastId: "private-toast",
                    position: toast.POSITION.TOP_CENTER,
                  }
                )
              }
            >
              <HelpIcon />
            </IconWrap>
          </PrivateLabel>
        </Flex>
      </Divider>
      <ToastContainer
        limit={1}
        autoClose={5000}
        hideProgressBar
        closeOnClick
        transition={Slide}
        pauseOnFocusLoss={false}
      />
    </>
  )
};

const GlobalStyle = createGlobalStyle`
  .Toastify__toast--info {
    background: #2cce9f;
    border-radius: 8px;
    color: #000;
    margin: 2em;
    font: inherit;
  }
  .Toastify__close-button {
    color: #000;
  }
`;

const Divider = styled.div`
  margin: 1em 0;
`;

const Flex = styled.div`
  display: flex;
`;

const PrivateLabel = styled.label`
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 1.5em;
`;

const PublicCheckbox = styled.input`
  display: block;
  background: #fff;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 2px solid #fff;
  transition: background 0.25s;
  margin-right: 0.5em;

  &:focus {
    outline: 0;
  }
  &:checked {
    background: #2cce9f;
  }
`;

const IconWrap = styled.button`
  appearance: none;
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  margin: 0 0 0 0.25em;
  transition: opacity 0.25s, color 0.25s;
  padding: 0;

  &:hover,
  &:focus,
  &:disabled {
    color: #2cce9f;
    opacity: 0.5;
    outline: 0;
  }
`;

export default PrivacyCheck;