import { Dialog, DialogContent, DialogTitle } from '@mui/material';
import { useShallow } from 'zustand/shallow';
import { useHomeStore } from '../store';
import { useMemo } from 'react';
import { useLayoutStore } from '@/modules/layout/store';
export const Label = ({ label, children }: { label: string; children: React.ReactNode }) => {
  return (
    <div className='text-sm text-gray-500 w-full flex gap-2'>
      <div className='min-w-[60px]'>{label}</div>
      <div className=''>{children}</div>
    </div>
  );
};
export const SuccessModal = () => {
  const { openSuccessModal, setOpenSuccessModal, appKey, version, filename } = useHomeStore(
    useShallow((state) => ({
      openSuccessModal: state.openSuccessModal,
      setOpenSuccessModal: state.setOpenSuccessModal,
      appKey: state.appKey, //
      version: state.version, //
      filename: state.filename, //
    })),
  );
  const { me } = useLayoutStore(useShallow((state) => ({ me: state.me })));
  const link = useMemo(() => {
    const _currentHref = new URL(window.location.href);
    const username = me?.username;
    const newHref = new URL(`/${username}/${appKey}/`, _currentHref.origin);
    return newHref.toString();
  }, [me, appKey]);
  return (
    <Dialog open={openSuccessModal} onClose={() => setOpenSuccessModal(false)}>
      <DialogTitle className='text-black'>部署成功</DialogTitle>
      <DialogContent>
        <div className='flex flex-col gap-2 w-[400px] min-h-[100px] text-black'>
          <Label label='应用 Key: '>{appKey}</Label>
          <Label label='版本:'>{version}</Label>
          <Label label='访问地址:'>
            <a href={link} className='text-blue-500' target='_blank' rel='noreferrer'>
              {link}
            </a>
          </Label>
          <Label label='配置地址:'>
            <a href={`/app/edit/list`} className='text-blue-500' target='_self' rel='noreferrer'>
              {`/app/edit/list`}
            </a>
          </Label>
          <div className='mt-1 text-gray-500 italic' style={{ fontSize: 10 }}>
            注: 如果需要其他人访问，需要设置共享。
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
};