import React, {
  useState
} from 'react';

import {
  CollapseComponent,
  CollapseDataSource
} from '@alicloud/console-components';
import {
  H4
} from '@alicloud/demo-rc-elements';

import {
  LOREM
} from '../../../const';
import {
  ITestingProps
} from '../../../types';

const collapseInfoList: CollapseDataSource[] = [{
  title: 'Well, hello there',
  content: LOREM,
  disabled: true
}, {
  title: 'Gigantomaniac Monster Text, very long, much width, wow',
  content: LOREM
}, {
  title: 'Generic Title',
  content: LOREM
}, {
  title: 'Login Infomation',
  content: LOREM
}];

export default function ByDataSource({
  component
}: ITestingProps<CollapseComponent>): JSX.Element {
  const Collapse = component;
  
  const [stateExpandedKeys, setStateExpandedKeys] = useState<string[]>([]);
  
  return <>
    <H4>基本（可以同时展开多个面板）</H4>
    <H4>数据源</H4>
    <Collapse dataSource={collapseInfoList} />
    <H4>手风琴</H4>
    <Collapse dataSource={collapseInfoList} accordion />
    <H4>全部禁用</H4>
    <Collapse dataSource={collapseInfoList} disabled />
    <H4>展开事件</H4>
    <Collapse {...{
      dataSource: collapseInfoList,
      expandedKeys: stateExpandedKeys,
      onExpand: setStateExpandedKeys
    }} />
  </>;
}