import { FC } from 'react'
import { Checkbox, Space, Input } from 'antd-mobile'
import styled from 'styled-components'
import type { CheckboxGroupProps } from 'antd-mobile'
import type { CheckboxValue } from 'antd-mobile/es/components/checkbox'
import type { BasicCheckboxValueType } from '@/types'

interface KMCheckboxPropsType
  extends Omit<CheckboxGroupProps, 'onChange' | 'value'> {
  value?: BasicCheckboxValueType
  showOther?: boolean
  horizontal?: boolean
  options: OptionsType[]
  onChange?: (value: BasicCheckboxValueType) => void
}

type OptionsType = {
  label: string
  value: string
  [propName: string]: any
}

const Icon = styled.i`
  font-size: var(--icon-size);
  color: var(--adm-color-light);
`

const CheckedIcon = styled.i`
  font-size: var(--icon-size);
  color: var(--adm-color-primary);
`

const OtherWrap = styled.div`
  display: flex;
  .adm-checkbox {
    flex-shrink: 0;
    margin-right: 8px;
  }
  .adm-input {
    width: 180px;
    height: 36px;
    padding: 0 12px;
    font-size: 28px;
    --font-size: 14px;
    border: 0.5px solid #dcdcdc;
    border-radius: 6px;
    background: #fff;
  }
`

const KMCheckbox: FC<KMCheckboxPropsType> = ({
  value = { value: [], other: '' },
  horizontal = false,
  showOther = false,
  options,
  onChange,
  ...otherProps
}) => {
  const triggerValue = (changedValue: Partial<BasicCheckboxValueType>) => {
    onChange?.({ ...value, ...changedValue })
  }

  const onValueChange = (value: CheckboxValue[]) => {
    triggerValue({ value: value })
  }

  const onOtherChange = (value: string) => {
    triggerValue({ other: value })
  }
  return (
    <>
      <Checkbox.Group
        value={value.value}
        onChange={onValueChange}
        {...otherProps}
      >
        <Space
          direction={horizontal ? 'horizontal' : 'vertical'}
          wrap={horizontal}
          block
        >
          {options.map((option, index) => {
            return (
              <Checkbox
                key={`${option.value}__${index}`}
                value={option.value}
                icon={checked =>
                  checked ? (
                    <CheckedIcon className="iconfont icon-checkbox-checked"></CheckedIcon>
                  ) : (
                    <Icon className="iconfont icon-checkbox"></Icon>
                  )
                }
              >
                {option.label}
              </Checkbox>
            )
          })}
          {showOther && (
            <OtherWrap>
              <Checkbox
                value="其他"
                icon={checked =>
                  checked ? (
                    <CheckedIcon className="iconfont icon-checkbox-checked"></CheckedIcon>
                  ) : (
                    <Icon className="iconfont icon-checkbox"></Icon>
                  )
                }
              >
                其他
              </Checkbox>
              <Input value={value.other} onChange={onOtherChange} />
            </OtherWrap>
          )}
        </Space>
      </Checkbox.Group>
    </>
  )
}

export default KMCheckbox