import React from 'react';

import {
  TransferComponent,
  DataSourceItem
} from '@alicloud/console-components';
import {
  H3
} from '@alicloud/demo-rc-elements';

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

const dataSource: DataSourceItem[] = [];

const valueDataSource: DataSourceItem<number>[] = [];

for (let i = 0; i < 10; i++) {
  dataSource.push({
    label: `content${i}`,
    value: `${i}`,
    disabled: i % 4 === 0
  });
  valueDataSource.push({
    label: `content${i}`,
    value: i,
    disabled: i % 4 === 0
  });
}

const customItemRender = (transferInfo: DataSourceItem): string => `${transferInfo.label}:${transferInfo.value}`;

const customOnChange = (value: string[], data: DataSourceItem[], extra: {
  leftValue: string[];
  leftData: DataSourceItem[];
  movedValue: string[];
  movedData: DataSourceItem[];
  direction: 'left' | 'right';
}): void => {
  // eslint-disable-next-line no-console
  console.log(value, data, extra, extra.leftValue, extra.leftData, extra.movedValue, extra.movedData, extra.direction);
};

const customFilter = (searchedValue: string, data: DataSourceItem): boolean => {
  // eslint-disable-next-line no-console
  console.log(searchedValue, data);

  return searchedValue === data.value;
};

const customOnSort = (value: string[], position: 'left' | 'right'): void => {
  // eslint-disable-next-line no-console
  console.log(value, position);
};

export default function Testing({
  component
}: ITestingProps<TransferComponent>): JSX.Element {
  const Transfer = component;

  return <>
    <H3>简单模式</H3>
    <Transfer
      mode="simple"
      defaultValue={['3']}
      dataSource={dataSource}
      defaultLeftChecked={['1']}
      titles={['Title', 'Title']} />
    <H3>Value 为 number</H3>
    <Transfer<number>
      mode="simple"
      defaultValue={[3]}
      dataSource={valueDataSource}
      defaultLeftChecked={[3]}
      titles={['Title', 'Title']} />
    <H3>样式修改</H3>
    <Transfer
      titles={['左边标题', <div>右边标题</div>]}
      itemRender={customItemRender}
      showSearch
      searchProps={{
        hasClear: true
      }}
      notFoundContent={['left not found', <div>right not found</div>]}
      operations={[<div>向右</div>, <div>向左</div>]}
      dataSource={dataSource} />
    <H3>方法验证</H3>
    <Transfer
      showSearch={[true, false]}
      sortable
      onChange={customOnChange}
      filter={customFilter}
      onSort={customOnSort}
      dataSource={dataSource} />
  </>;
}