import React, { useState } from "react";
import { Button, BUTTON_VARIANT, BUTTON_SIZE } from "../../Button";
import { Flex } from "../../Flex";
import { showToast, ShowToastProps } from "../Toast";
import { Label } from "../../Label";
import { Input } from "../../Input";
import { STATUS_VARIANT } from "../../../types";
import { Radio } from "../../Radio";
import { Heading } from "../../Heading";
import { Panel } from "../../Panel";
import { Checkbox } from "../../Checkbox";
import { Description } from "../../Description";

export const ShowToastButton = ({
  toastProps,
  buttonLabel,
}: {
  toastProps: ShowToastProps;
  buttonLabel: string;
}) => (
  <Button
    variant={BUTTON_VARIANT.SECONDARY}
    size={BUTTON_SIZE.LARGE}
    onClick={() => {
      showToast(toastProps);
    }}
  >
    {buttonLabel}
  </Button>
);

export const ToastSandbox = ({
  toastProps,
  buttonLabel,
}: {
  toastProps: ShowToastProps;
  buttonLabel: string;
}) => {
  const [duration, setDuration] = useState(5000);
  const [disableProgress, setDisableProgress] = useState(false);
  const [variant, setVariant] = useState(STATUS_VARIANT.DEFAULT);

  return (
    <Flex className="flex-col gap-y-6">
      <Flex className="flex-col gap-y-1">
        <Label htmlFor="sandbox-duration">Duration (in milliseconds)</Label>
        <Description>
          The amount of time the toast appears on-screen.
        </Description>
        <Flex className="flex-col gap-y-2">
          <Flex className="gap-x-2 items-center">
            <Input
              id="sandbox-duration"
              name="sandbox-duration"
              type="number"
              step={100}
              value={duration}
              onChange={(e) => setDuration(Number(e.target.value))}
              className="w-40"
            />
            {duration === 5000 ? (
              <span className="text-gray-700">Default</span>
            ) : (
              <button
                className="text-link underline"
                type="button"
                onClick={() => setDuration(5000)}
              >
                Reset to default
              </button>
            )}
          </Flex>
          <Checkbox
            id="disable-progress"
            label="Disable progress"
            checked={disableProgress}
            onChange={() => setDisableProgress(!disableProgress)}
          />
        </Flex>
      </Flex>

      <Flex className="flex-col gap-y-1">
        <Label htmlFor="sandbox-variant">Variant</Label>
        <Description>
          The variant prop changes the bottom border color of the toast.
        </Description>
        <Radio.Group>
          {Object.values(STATUS_VARIANT).map((v) => (
            <Radio
              key={v}
              value={v}
              label={v.charAt(0).toUpperCase() + v.slice(1)}
              onChange={() => setVariant(v)}
              checked={v === variant}
              id={`sandbox-variant-${v}`}
              name="sandbox-variant"
            />
          ))}
        </Radio.Group>
      </Flex>

      <Flex>
        <Button
          variant={BUTTON_VARIANT.SECONDARY}
          size={BUTTON_SIZE.LARGE}
          onClick={() => {
            showToast({ ...toastProps, duration, disableProgress, variant });
          }}
        >
          {buttonLabel}
        </Button>
      </Flex>
    </Flex>
  );
};

export const ToastPreviewContainer = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  return <Flex className="flex-col gap-y-8">{children}</Flex>;
};

export const ToastPreview = ({
  heading,
  children,
}: {
  heading: string;
  children: React.ReactNode;
}) => {
  return (
    <Flex className="flex-col gap-y-2">
      <Heading.H3>{heading}</Heading.H3>
      <Panel className="flex flex-col gap-y-4 p-8 rounded-lg">{children}</Panel>
    </Flex>
  );
};