import { Button } from "antd";
import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
import { useState } from "react";
import { useTranslation } from "react-i18next";

import ProText from "components/ProText";
import QRIcon from "components/Icons/QRIcon";
import UploadIcon from "components/Icons/UploadIcon";

interface QRBottomSheetProps {
  isOpen: boolean;
  onClose: () => void;
  onSave?: (value: string) => void;
}

export function QRBottomSheet({ isOpen, onClose }: QRBottomSheetProps) {
  const { t } = useTranslation();
  const [qrCode, setQRCode] = useState("");

  const handleSave = () => {
    onClose();
  };

  const handleCopyQRCode = () => {
    navigator.clipboard.writeText(qrCode);
  };

  return (
    <ProBottomSheet
      isOpen={isOpen}
      onClose={onClose}
      title={t("splitBill.payWithQR")}
      showCloseButton={true}
      initialSnap={1}
      height={590}
      snapPoints={[590]}
      contentStyle={{
        padding: 0,
      }}
    >
      <div
        style={{
          padding: "20px",
          display: "flex",
          flexDirection: "column",
          gap: 20,
        }}
      >
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          <ProText
            style={{
              fontWeight: 600,
              fontStyle: "SemiBold",
              fontSize: 20,
              lineHeight: "140%",
              letterSpacing: "0%",
            }}
          >
            {t("splitBill.shareThisToSplitTheBill")}
          </ProText>
          <ProText
            style={{
              fontWeight: 400,
              fontStyle: "Regular",
              fontSize: 14,
              lineHeight: "140%",
              letterSpacing: "0%",
              color: "var(--text-color-gray)",
            }}
          >
            {t("splitBill.shareLinkDescription")}
          </ProText>
        </div>

        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            height: 276,
            borderRadius: 16,
            gap: 40,
            paddingTop: 40,
            paddingRight: 24,
            paddingBottom: 40,
            paddingLeft: 24,
            backgroundColor: "var(--background)",
          }}
        >
          <QRIcon />
          <Button
            style={{
              width: 169,
              height: 40,
              borderRadius: 888,
              gap: 16,
              opacity: 1,
              borderWidth: 1,
              paddingTop: 8,
              paddingRight: 32,
              paddingBottom: 8,
              paddingLeft: 32,
            }}
            onClick={handleCopyQRCode}
            icon={<UploadIcon />}
            iconPlacement="end"
          >
            {t("splitBill.shareLink")}
          </Button>
        </div>
      </div>

      <div
        style={{
          display: "flex",
          gap: 12,
          margin: 20,
        }}
      >
        <Button
          style={{
            flex: 1,
            boxShadow: "none",
            border: "1px solid #C0BFC4",
          }}
          onClick={onClose}
        >
          {t("splitBill.cancel")}
        </Button>
        <Button
          type="primary"
          style={{
            flex: 1,
            boxShadow: "none",
          }}
          onClick={handleSave}
        >
          {t("splitBill.done")}
        </Button>
      </div>
    </ProBottomSheet>
  );
}
