import { Card, Collapse, CollapseProps, Form } from 'antd';
import React, { useEffect, useState } from 'react';
import SimpleOptions from './SimpleOptions';
import TrailOptions from './TrialOptions';
import ImageOptions from './ImageOptions';
import ResetFreeCountOption from './ResetFreeCountOption';


const DubSetting: React.FC = () => {
  const [activeKeys, setActiveKeys] = useState<string[]>([]);

  const onChange = (key: string | string[]) => {
    setActiveKeys(Array.isArray(key) ? key : [key]);
  };

  const items: CollapseProps['items'] = [
    {
      key: 'simpleOptions',
      label: <strong>通用配置</strong>,
      children: <SimpleOptions visible={activeKeys.includes('simpleOptions')} />,
    },
    {
      key: 'trailOptions',
      label: <strong>试用设置</strong>,
      children: <TrailOptions visible={activeKeys.includes('trailOptions')} />,
    },
    {
      key: 'imageOptions',
      label: <strong>绘图设置</strong>,
      children: <ImageOptions visible={activeKeys.includes('imageOptions')} />,
    },
    {
      key: 'freeCountResetOptions',
      label: <strong>重置换绑设置</strong>,
      children: <ResetFreeCountOption visible={activeKeys.includes('freeCountResetOptions')} />,
    }
  ];

  return (
    <Collapse items={items} bordered={false} ghost onChange={onChange} />
  );
};

export default DubSetting;