import "react-loading-skeleton/dist/skeleton.css";

import { TextUtil } from "@greatness/util";
import Skeleton from "react-loading-skeleton";

import Button from "../Button";
import Modal from "../Modal";
import createUseStyles from "../theme/createUseStyles";
import { cn } from "../util/cn";

import useConfirm from "./useConfirm";

const useStyles = createUseStyles({
  buttonsWrapper: {
    "& button": {
      flex: 1,
      maxWidth: 125,
      wordBreak: "keep-all",
    },
  },
  modalButton: {
    "& > div": {
      justifyContent: "center",
    },
  },
  modalContent: {
    width: 350,
  },
});

export default function ConfirmDialog({
  confirmText,
  cancelText,
}: {
  confirmText: string;
  cancelText: string;
}) {
  const classes = useStyles();
  const { onCancel, onConfirm, confirmState } = useConfirm();

  return (
    <Modal isOpen={confirmState.show} handleClose={onCancel}>
      <div className={cn("flex flex-col", classes.modalContent)}>
        <h5>
          {TextUtil.isEmpty(confirmState.text) ? (
            <Skeleton width={325} height={28} />
          ) : (
            confirmState.text
          )}
        </h5>
        <div className={cn("flex gap-m justify-center", classes.buttonsWrapper)}>
          <Button
            onClick={onConfirm}
            label={confirmText}
            className={classes.modalButton}
          />
          <Button
            color="var(--color-semiLightRed)"
            onClick={onCancel}
            label={cancelText}
            className={classes.modalButton}
          />
        </div>
      </div>
    </Modal>
  );
}
