import { useState } from "react";
import { Dialog } from "@headlessui/react";
import { Button } from "./Button/Button";
import Typography from "components/typography/Typography";

export function BottomSheetBar() {
  // The open/closed state lives outside of the Dialog and is managed by you
  let [isOpen, setIsOpen] = useState(true);

  function handleDeactivate() {
    alert("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA");
  }

  return (
    /*
      Pass `isOpen` to the `open` prop, and use `onClose` to set
      the state back to `false` when the user clicks outside of
      the dialog or presses the escape key.
    */
    <Dialog
      open={isOpen}
      onClose={() => {}}
      className="absolute bottom-0 bg-blue-900 text-white w-full"
    >
      <Dialog.Panel className="flex px-[47px] py-6 justify-between items-center">
        <Dialog.Description className="items-center">
          By clicking “Accept All Cookies”, you agree to the storing of cookies
          on your device to enhance site navigation, analyze site usage, and
          assist in our marketing efforts.
        </Dialog.Description>
        {/*
          You can render additional buttons to dismiss your dialog by setting
          `isOpen` to `false`.
        */}
        <div className="flex flex-col md:flex-row">
          <Button
            defaultStyle={false}
            emphasis="low"
            className=" items-center grow-0 min-h-max mx-3 text-blue-600 hover:bg-blue-200 focus:outline-none active:bg-blue-400"
            onClick={handleDeactivate}
          >
            <Typography fontWeightVariant="semibold">
              Customize settings
            </Typography>
          </Button>
          <Button
            className="md:w-max min-h-max mx-3 focus:outline-none items-center"
            onClick={() => setIsOpen(false)}
          >
            <Typography fontWeightVariant="semibold">
              Accept all cookies
            </Typography>
          </Button>
        </div>
      </Dialog.Panel>
    </Dialog>
  );
}