import { Mail, Phone, MapPin, Book, Globe, Brain, Save } from 'lucide-react';
import { chain, TextEditor } from './components/TextEditor';
import { toast, ToastContainer } from 'react-toastify';
import { Provider } from './Provider';
import { useState } from 'react';
import { CodeDescModal } from './modules/CodeDescModal';
import { query } from './modules/query.ts';
import { toastSuccess, toastWeChat } from './modules/RedirectSuccess.tsx';
import { getOrigin } from './modules/get-origin.ts';

export const Editor = () => {
  const [showPreview, setShowPreview] = useState(false);
  const [html, setHtml] = useState<string>('');
  const [open, setOpen] = useState(false);
  const [resultUrl, setResultUrl] = useState<string>('');
  const [url] = useState<string>('https://kevisual.cn');
  const onSubmit = async (values: { title: string; description: string }) => {
    setResultUrl('');
    const uploadData = {
      title: values?.title,
      description: values?.description,
      content: chain.getContent(),
    };
    const res = await query.post({
      path: 'app',
      key: 'public-upload-html',
      data: uploadData,
    });
    if (res.code === 200) {
      const url = res.data?.url;
      if (url) {
        let origin = getOrigin();
        const newUrl = new URL(url, origin);
        // toast.success('创建成功, 访问地址' + newUrl.toString(), { autoClose: 3000 });
        toastSuccess(newUrl.toString());
        setResultUrl(newUrl.toString());
      }
    }
  };
  return (
    <main
      className='flex flex-col overflow-hidden'
      style={{
        height: 'calc(100vh - 64px)',
      }}>
      <nav className='h-12 bg-white flex'>
        <button
          className='flex items-center px-4 h-full bg-white border-b border-b-gray-200 hover:bg-gray-50 cursor-pointer'
          onClick={() => {
            const content = chain.getContent();
            if (!content) {
              toast.error('内容不能为空', { position: 'top-center', autoClose: 1000 });
              return;
            }
            setOpen(true);
          }}>
          <span className='text-gray-700'>创建</span>
          <Save className='ml-2 w-4 h-4 text-gray-500' />
        </button>

        <button
          className='flex items-center px-4 h-full bg-white border-b border-b-gray-200 hover:bg-gray-50 cursor-pointer'
          style={{
            backgroundColor: showPreview ? '#f0f0f0' : 'white',
          }}
          onClick={() => {
            setShowPreview(!showPreview);
          }}>
          <span className='text-gray-700'>预览</span>
          <Globe className='ml-2 w-4 h-4 text-gray-500' />
        </button>
      </nav>
      <div className='p-2 rounded shadow flex' style={{ height: 'calc(100% - 48px - 48px)' }}>
        <div className='h-full overflow-auto flex-1'>
          <TextEditor content={''} chain={chain} onChange={setHtml} />
        </div>
        {showPreview && (
          <div className='w-1/2 shrink-1 border-l border-gray-200 h-full overflow-auto'>
            <iframe className='w-full h-full border-0' srcDoc={html} title='预览' sandbox='allow-scripts allow-same-origin allow-popups' />
          </div>
        )}
      </div>
      <footer className='h-12'>
        {!resultUrl && <div className='flex items-center h-full text-gray-500 px-2 italic'>粘贴您的 HTML 内容到编辑器中，点击“创建”按钮生成链接。</div>}
        {resultUrl && (
          <div className='flex items-center gap-2 px-4 h-full bg-white border-t border-t-gray-200'>
            <span className='text-gray-700'>生成的链接:</span>
            <a href={resultUrl} target='_blank' rel='noopener noreferrer' className='text-blue-600 hover:underline'>
              {resultUrl}
            </a>
          </div>
        )}
      </footer>
      <CodeDescModal open={open} onClose={() => setOpen(false)} onSubmit={onSubmit} />
    </main>
  );
};
export const App = () => {
  return (
    <>
      <Provider>
        <ToastContainer autoClose={2000}></ToastContainer>
        <Editor />
      </Provider>
    </>
  );
};
