import { FC, useState } from 'react'
import { Input } from 'antd-mobile'
import { CloseOutline } from 'antd-mobile-icons'
import type { CheckboxValue } from 'antd-mobile/es/components/checkbox'
import { DownOutline } from 'antd-mobile-icons'
import styled from 'styled-components'
import { KMCenterPopupComfirm, KMCheckbox } from '@/components/ui'

interface KMPopupSelectPropsType {
  testValue?: CheckboxValue[]
  value?: CheckboxValue[]
  options: OptionsType[]
  onChange?: (value: CheckboxValue[]) => void
}

type OptionsType = {
  label: string
  value: string
}

const InputWrap = styled.div`
  position: relative;
  min-height: 40px;
  .adm-input-feign {
    /* max-width: 100%; */
    height: auto;
    .adm-input-element {
      line-height: 19px;
      height: auto;
      padding: 0 26px 0 0;
    }
  }
  > .arrow-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
  }
`

const InputTag = styled.span`
  margin: 3px 10px 3px 0;
  padding: 4px 6px;
  line-height: 1;
  padding-right: 24px;
  border-radius: 4px;
  max-width: 100%;
  box-sizing: border-box;
  background-color: #e3e3e3;
  position: relative;
  display: inline-block;
  span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
  }
  .cancel-icon {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: #9f9f9f;
  }
`

const CheckboxWrap = styled.div`
  padding: 20px;
  > div {
    border: 0.5px solid #dcdfe4;
    border-radius: 4px;
    background-color: #fbfcfd;
  }
`
const ButtonsWrap = styled.div`
  display: flex;
  justify-content: space-around;
  border-top: 0.5px solid #dcdfe4;
  .btn {
    font-size: 18px;
    font-weight: normal;
    line-height: 25px;
    text-align: center;
    letter-spacing: 0px;
    flex-grow: 1;
    padding: 17px 0 13px 0;
    + .btn {
      border-left: 0.5px solid #dcdfe4;
    }
  }
  .btn-cancel {
    color: #9699a0;
  }
  .btn-comfirm {
    color: var(--adm-color-primary);
  }
`

const KMPopupSelect: FC<KMPopupSelectPropsType> = ({
  value = [],
  options = [],
  onChange
}) => {
  const [visible, setVisible] = useState(false)
  const [values, setValues] = useState<CheckboxValue[]>(value)

  const handleComfirm = () => {
    onChange?.(values)
    setVisible(false)
  }

  const handleCancel = () => {
    setValues([...value])
    setVisible(false)
  }

  const handleCancelChoose = (
    e: React.MouseEvent<SVGSVGElement, MouseEvent>,
    val: string | number
  ) => {
    e.stopPropagation()
    const vals = values.filter(item => item !== val)
    setValues(vals)
    onChange?.(vals)
  }

  return (
    <>
      <InputWrap onClick={() => setVisible(!visible)}>
        {value.length ? (
          <div className="adm-input-feign adm-input">
            <div className="adm-input-element">
              {value.map(val => (
                <InputTag key={val}>
                  <span>{val}</span>
                  <CloseOutline
                    onClick={e => handleCancelChoose(e, val)}
                    className="cancel-icon"
                  />
                </InputTag>
              ))}
            </div>
          </div>
        ) : (
          <Input placeholder="请选择" readOnly />
        )}
        <DownOutline className="arrow-icon" />
      </InputWrap>
      <KMCenterPopupComfirm visible={visible} setVisible={setVisible}>
        <CheckboxWrap>
          <KMCheckbox
            value={{ value: values, other: '' }}
            options={options}
            onChange={({ value: val }) => setValues(val)}
          />
        </CheckboxWrap>
        <ButtonsWrap>
          <div className="btn btn-cancel" onClick={handleCancel}>
            取消
          </div>
          <div className="btn btn-comfirm" onClick={handleComfirm}>
            确定
          </div>
        </ButtonsWrap>
      </KMCenterPopupComfirm>
    </>
  )
}

export default KMPopupSelect