import { useContext, useState, useMemo } from 'react';
import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
import Dialog from '@arcblock/ux/lib/Dialog';
import FormControlLabel from '@mui/material/FormControlLabel';
import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
import Button from '@arcblock/ux/lib/Button';
import Checkbox from '@mui/material/Checkbox';
import CodeBlock from '@arcblock/ux/lib/CodeBlock';
import { joinURL } from 'ufo';
import ClickToCopy from '../../../lib/click-to-copy';
import { useNodeContext } from '../../contexts/node';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function ConfirmAccessKey({
  onConfirm = () => {},
  accessKeyId,
  accessKeySecret,
  hideSecret = true
}) {
  const {
    t
  } = useContext(LocaleContext);
  const [checked, setChecked] = useState(false);
  const [hideAccessSecret, setHideAccessSecret] = useState(() => hideSecret);
  const node = useNodeContext();
  const onChangeSwitch = () => {
    setHideAccessSecret(!hideAccessSecret);
  };
  const handleChange = event => {
    setChecked(event.target.checked);
  };
  const serverPath = joinURL(window.location.origin, process.env.NODE_ENV === 'production' ? node?.info?.routing?.adminPath : '');
  const code = useMemo(() => {
    if (!hideSecret) {
      if (node.inService) {
        return `curl -H "Authorization: Bearer ${accessKeySecret}" "${joinURL(window.blocklet?.appUrl, WELLKNOWN_SERVICE_PATH_PREFIX, '/api/did/session')}"`;
      }
      return `curl -H "Authorization: Bearer ${accessKeySecret}" "${joinURL(serverPath, '/api/did/session')}"`;
    }
    return `\
const Client = require('@blocklet/server-js');
const ensureServerEndpoint = require('@abtnode/util/lib/ensure-server-endpoint');
const { joinURL } = require('ufo');

const { endpoint } = await ensureServerEndpoint("${node.inService ? window.blocklet?.appUrl : serverPath}");
const fullEndpoint = joinURL(endpoint, '/api/gql');

const client = new Client(fullEndpoint);
client.setAuthAccessKey({
  accessKeyId: "${accessKeyId}",
  accessKeySecret: "${accessKeySecret}",
});

const rootDid = '${window.blocklet?.appId || window.blocklet?.appPid || '{rootDid}'}';
const result = await client.getBlocklet(
  { input: { did: rootDid, attachRuntimeInfo: false } },
  { headers: { 'x-access-blocklet': rootDid } }
);
`;
  }, [hideSecret, accessKeyId, accessKeySecret, node.inService, serverPath]);
  const deployCode = useMemo(() => {
    if (!hideSecret) {
      return null;
    }
    return `blocklet deploy --endpoint ${node.inService ? window.blocklet?.appUrl : serverPath} --access-key ${accessKeyId} --access-secret ${accessKeySecret} {blockletPath}/.blocklet/bundle;`;
  }, [hideSecret, accessKeyId, accessKeySecret, node.inService, serverPath]);
  return /*#__PURE__*/_jsxs(Dialog, {
    title: t('common.createSuccess'),
    fullWidth: true,
    open: true,
    disableEscapeKeyDown: true,
    onClose: (event, reason) => {
      // 点击对话框外部（backdrop）时不关闭
      if (reason !== 'backdropClick') {
        onConfirm();
      }
    },
    showCloseButton: false,
    actions: /*#__PURE__*/_jsx("div", {
      children: /*#__PURE__*/_jsx(Button, {
        disabled: !hideSecret ? false : !checked,
        onClick: onConfirm,
        color: "primary",
        autoFocus: true,
        variant: "contained",
        "data-cy": "submit-confirm-dialog",
        children: t('common.confirm')
      })
    }),
    "aria-labelledby": "simple-dialog-title",
    children: [/*#__PURE__*/_jsx("div", {
      children: /*#__PURE__*/_jsx(Bold, {
        children: hideSecret ? t('setting.accessKey.saveSecretTip') : t('setting.accessKey.viewSecret')
      })
    }), /*#__PURE__*/_jsx("div", {
      style: {
        marginTop: '20px'
      }
    }), /*#__PURE__*/_jsxs(Item, {
      children: [/*#__PURE__*/_jsx(Label, {
        children: t('setting.accessKey.accessKeyId')
      }), /*#__PURE__*/_jsx(ClickToCopy, {
        children: accessKeyId
      })]
    }), /*#__PURE__*/_jsxs(Item, {
      children: [/*#__PURE__*/_jsx(Label, {
        children: t('setting.accessKey.accessKeySecret')
      }), hideAccessSecret ? /*#__PURE__*/_jsx(Button, {
        "data-cy": "show-secret-btn",
        color: "primary",
        onClick: onChangeSwitch,
        children: t('setting.accessKey.showSecret')
      }) : /*#__PURE__*/_jsx(ClickToCopy, {
        children: accessKeySecret
      })]
    }), !hideAccessSecret && /*#__PURE__*/_jsxs(Item, {
      children: [/*#__PURE__*/_jsx(Label, {
        children: `Access Key ${t('setting.accessKey.usage')}`
      }), /*#__PURE__*/_jsx(CodeBlock, {
        code: code,
        language: "shell",
        showDefaultText: false
      }), deployCode && /*#__PURE__*/_jsx(CodeBlock, {
        code: deployCode,
        language: "shell",
        showDefaultText: false
      })]
    }), hideSecret && /*#__PURE__*/_jsx("div", {
      children: /*#__PURE__*/_jsx(FormControlLabel, {
        value: "end",
        disabled: hideAccessSecret,
        control: /*#__PURE__*/_jsx(Checkbox, {
          checked: checked,
          onChange: handleChange
        }),
        label: t('setting.accessKey.iKnow'),
        labelPlacement: "end"
      })
    })]
  });
}
ConfirmAccessKey.propTypes = {
  accessKeyId: PropTypes.string.isRequired,
  accessKeySecret: PropTypes.string.isRequired,
  onConfirm: PropTypes.func,
  hideSecret: PropTypes.bool
};
const Label = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  margin-bottom: 8px;
`;
const Item = styled.div`
  margin-bottom: 24px;
`;
const Bold = styled.div`
  font-size: 16px;
  font-weight: bold;
`;