#IndexList 索引栏

import { IndexList } from "@taroify/core"

function BasicIndexList() {
  const indexList: string[] = []
  const charCodeOfA = "A".charCodeAt(0)

  for (let i = 0; i < 26; i++) {
    indexList.push(String.fromCharCode(charCodeOfA + i))
  }

  return (
    <IndexList>
      {_.map(indexList, (index) => {
        return (
          <Fragment key={index}>
            <IndexList.Anchor index={index} />
            <Cell title="文本" />
            <Cell title="文本" />
            <Cell title="文本" />
          </Fragment>
        )
      })}
    </IndexList>
  )
}

function CustomIndexList() {
  const customIndexList = [1, 2, 3, 4, 5, 6, 8, 9, 10]

  return (
    <IndexList>
      {_.map(customIndexList, (index) => {
        return (
          <Fragment key={index}>
            <IndexList.Anchor index={index}>标题{index}</IndexList.Anchor>
            <Cell title="文本" />
            <Cell title="文本" />
            <Cell title="文本" />
          </Fragment>
        )
      })}
    </IndexList>
  )
}

function PopupIndexBar() {
  const [open, setOpen] = useState(false)

  const indexList: string[] = []
  const charCodeOfA = "A".charCodeAt(0)

  for (let i = 0; i < 26; i++) {
    indexList.push(String.fromCharCode(charCodeOfA + i))
  }

  return (
    <>
      <Button onClick={() => setOpen(true)}>打开弹窗</Button>
      <Popup
        open={open}
        style={{ height: "80%" }}
        placement="bottom"
        rounded
        onClose={() => setOpen(false)}
      >
        <Popup.Close />
        <View className="index-list-demo_wrap">
          <IndexList inner delay={300}>
            {_.map(indexList, (index) => {
              return (
                <Fragment key={index}>
                  <IndexList.Anchor index={index} />
                  <Cell title="文本" />
                  <Cell title="文本" />
                  <Cell title="文本" />
                </Fragment>
              )
            })}
          </IndexList>
        </View>
      </Popup>
    </>
  )
}