// import { Tabs } from '@ark-ui/react';
// import { MantineProvider } from '@mantine/core';
// import { FC, useState } from 'react';
// import { useParams } from 'react-router';
// import { Button, Group, Stack } from '../../components';
// import { Dialog } from '../../components/Dialog';
// import { JobInfo } from '../../components/JobInfo';
// import TabList from '../../components/TabList';
// import { jobs } from '../../demoData/job';
// import { Job } from '../../lib/spvtms';
// import { JobForm } from '../JobRecord/JobForm';
// import { Editor } from './Editor';

// export const EditorScene: FC = () => {
//   const { jobId } = useParams();
//   const [job] = useState<Job | null>(
//     jobs.find((job) => job.jobId === jobId) ?? null,
//   );
//   const [saving, setSaving] = useState(false);
//   const [saveSuccess, setSaveSuccess] = useState(false);
//   console.debug('saveSuccess', saveSuccess);
//   const [open, setOpen] = useState(false);

//   return (
//     <MantineProvider>
//       <>
//         {/* Job Form */}
//         <Dialog open={open} onRequestClose={() => setOpen(false)}>
//           <JobForm onSubmit={() => {}} />
//         </Dialog>
//         <div className="h-screen w-screen flex flex-col bg-zinc-100 p-2">
//           <Stack className="w-full">
//             <Group className="h-14 w-full items-center gap-2 bg-white p-2">
//               <p className="text-xl">Job ID:{job?.jobId ?? 'TBC'}</p>
//               <Button
//                 className="ml-auto w-30 bg-green-6 bg-white p-2 py-1.5 text-black text-white"
//                 icon="i-ant-design-save-outlined"
//                 iconClass="text-6"
//                 onClick={() => {
//                   setSaveSuccess(true);
//                   setSaving(true);
//                   setTimeout(() => {
//                     setSaving(false);
//                   }, 1000);
//                 }}
//               >
//                 {saving ? 'Saving...' : 'Save'}
//               </Button>
//               <Button
//                 className="w-30 bg-blue-5 bg-white p-2 py-1.5 text-black text-white"
//                 icon="i-ant-design-send-outlined"
//                 iconClass="text-6"
//                 onClick={() => {
//                   window.confirm('Are you sure to submit?');
//                   setSaveSuccess(true);
//                   window.close();
//                 }}
//               >
//                 Submit
//               </Button>
//             </Group>
//           </Stack>
//           <Tabs.Root
//             className="mt-2 h-full w-full flex flex-col"
//             defaultValue="info"
//           >
//             <TabList
//               tabs={[
//                 { label: 'Info', value: 'info' },
//                 { label: 'Editor', value: 'editor' },
//               ]}
//             />
//             <Tabs.Content
//               className="h-full w-full flex-1 bg-white"
//               value="info"
//             >
//               {job && <JobInfo job={job} />}
//             </Tabs.Content>
//             <Tabs.Content
//               className="h-full w-full flex-1 bg-white"
//               value="editor"
//             >
//               {job && <Editor job={job} />}
//             </Tabs.Content>
//           </Tabs.Root>
//         </div>
//       </>
//     </MantineProvider>
//   );
// };
