import { FC, useState } from 'react'
import { Input, PickerView, Button } from 'antd-mobile'
import type { PickerValue } from 'antd-mobile/es/components/picker-view'
import { DownOutline, CloseCircleFill } from 'antd-mobile-icons'
import styled from 'styled-components'
import KMPopup from '../Popup'

interface KMPopupSelectPropsType {
  disabled?: boolean
  readonly?: boolean
  title?: string
  btnText?: string
  value?: PickerValue
  options: OptionsType[]
  onChange?: (value: PickerValue) => void
}

export type OptionsType = {
  label: string
  value: string
}

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

const ButtonWrap = styled.div`
  padding: 0 16px 16px 16px;
  .adm-button {
    background: linear-gradient(90deg, #f48930 0%, #f66416 100%);
    box-shadow: 0px 2px 8px 0px rgba(244, 137, 48, 0.3);
  }
`

const PopupHeader = styled.div`
  text-align: center;
  position: relative;
  padding: 15px 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  text-align: center;
  letter-spacing: 0px;
  border-bottom: 0.5px solid #dcdcdc;

  svg {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #dcdcdc;
    font-size: 16px;
  }
`

const KMPopupSelect: FC<KMPopupSelectPropsType> = ({
  disabled = false,
  readonly = false,
  title = '请选择',
  btnText = '确认输入',
  value,
  options = [],
  onChange
}) => {
  const choosed = !!(value || value === 0)
  const [visible, setVisible] = useState(false)
  const [values, setValues] = useState<PickerValue[]>(choosed ? [value] : [])

  const showValue = choosed
    ? options.find(option => option.value === value)?.label
    : null

  const handleComfirm = () => {
    onChange?.(values[0])
    doSetVisible(false)
  }

  const doSetVisible = (value: boolean) => {
    if (disabled) return
    setVisible(value)
  }

  return (
    <>
      <InputWrap onClick={() => doSetVisible(!visible)}>
        {choosed ? (
          <div className="adm-input-feign adm-input">
            <div className="adm-input-element">{showValue}</div>
          </div>
        ) : (
          <Input placeholder="请选择" readOnly />
        )}
        <DownOutline className="cancel-icon" />
      </InputWrap>
      <KMPopup visible={visible} setVisible={doSetVisible}>
        <PopupHeader>
          {title}
          <CloseCircleFill onClick={() => doSetVisible(false)} />
        </PopupHeader>
        <PickerView
          className="km-picker-view"
          style={{
            '--item-font-size': '14px',
            '--item-height': '40px'
          }}
          columns={[options]}
          value={values}
          mouseWheel
          onChange={val => {
            setValues(val)
          }}
        />
        {!disabled && !readonly && (
          <ButtonWrap>
            <Button
              block
              shape="rounded"
              color="primary"
              onClick={handleComfirm}
            >
              {btnText}
            </Button>
          </ButtonWrap>
        )}
      </KMPopup>
    </>
  )
}

export default KMPopupSelect