import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import { MemoryWorkspace } from '../../src/pages/MemoryWorkspace';
import '../../src/styles.css';
import '../../src/cal-theme.css';
import '../../src/customer-responsive.css';
import '../../src/maintenance-console.css';
import '../../src/admin-redesign.css';
import '../../src/components/home/customer-portal.css';

function Fixture() {
  const [elder, setElder] = useState('test-elder-a');
  const [consent, setConsent] = useState<'granted' | 'missing' | 'loading'>('granted');
  return <ConfigProvider locale={zhCN} theme={{ token: { controlHeight: 40 } }}>
    <button onClick={() => setElder(value => value === 'test-elder-a' ? 'test-elder-b' : 'test-elder-a')}>切换合成家庭</button>
    <button onClick={() => setConsent('missing')}>模拟无授权</button>
    <button onClick={() => setConsent('granted')}>模拟有效授权</button>
    <button onClick={() => setConsent('loading')}>模拟授权加载</button>
    <main style={{ padding: 24 }}><MemoryWorkspace elderID={elder} accessToken="local-synthetic-token" section="daily" {...({ memoryConsent: consent } as object)} /></main>
  </ConfigProvider>;
}
createRoot(document.getElementById('root')!).render(<Fixture />);