import React, { PropsWithChildren } from 'react'

import { MultiCascader, CascaderOption } from 'react-icecream'

export default () => {
  const options = [{
    label: '福建',
    value: 'fj',
    children: [{
      label: '福州',
      value: 'fuzhou',
      children: [{
        label: '马尾',
        value: 'mawei'
      },
      {
        label: '马头',
        value: 'matou'
      }]
    }, {
      label: '泉州',
      value: 'quanzhou'
    }]
  }, {
    label: '浙江',
    value: 'zj',
    children: [{
      label: '杭州',
      value: 'hangzhou',
      children: [{
        label: '余杭',
        value: 'yuhang'
      }]
    }]
  }, {
    label: '北京',
    value: 'bj',
    children: [{
      label: '朝阳区',
      value: 'chaoyang'
    }, {
      label: '海淀区',
      value: 'haidian',
      disabled: true
    }]
  }]

  function displayRender(selectedOptions: CascaderOption[]) {
    return <>{selectedOptions[selectedOptions.length - 1].label}</>
  }

  return (
    <>
      <Line>
        <MultiCascader options={options} onChange={console.log} clearable searchable placeholder="请选择" />
      </Line>
      <Line>
        <MultiCascader options={options} onChange={console.log} size="small" searchable placeholder="请选择" />
      </Line>
      <p>只渲染最后一个节点</p>
      <Line>
        <MultiCascader expandTrigger="click" onChange={console.log} displayRender={displayRender} options={options} size="large" searchable placeholder="请选择" />
      </Line>
    </>
  )
}

function Line({ children }: PropsWithChildren<{}>) {
  return <div style={{ marginBottom: '1em' }}>{children}</div>
}