import { useState } from 'react'
import styled from 'styled-components'
import { Input, Popup, SafeArea, Radio, Button, ErrorBlock } from 'antd-mobile'
import { RightOutline } from 'antd-mobile-icons'

import OrderCard from './order-card'
import { OrderListType } from '@/types/order'
import { showError } from '@/utils'
import { flowApi } from '@/services/flow'
import { useAppDispatch } from '@/store/storeHooks'
import emptyImage from '@/images/orders/empty.png'

interface SelectOrderType {
  value: string
  inForm?: boolean
  shopId: string
  buyerOpenUid: string
  buyerNick: string
  shopUniqueKey?: string
  companyKey: string
  onSelect?: (newValue: string) => void
  onBlur?: (newValue: string) => void
  onChange: (id: string, detail?: OrderListType) => boolean | void
}

const InputBox = styled.div`
  position: relative;
  height: 47px;
  background: #fff;
  border: 0.5px solid #dcdcdc;
  padding: 10px 88px 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
  color: #111111;
  &.in-form {
    height: 45px;
    border: 0;
    padding: 0;
  }
`
// const InputBoxNoBorder = styled(InputBox)`
//   border: 0;
// `

const InputRight = styled.div`
  display: flex;
  align-items: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 8px;
  font-size: 14px;
  z-index: 2;
  color: #ff5000;
`
const PopupContentBox = styled.div`
  padding: 14px 6px 0;
  .adm-error-block {
    margin-top: 100px;
  }
`
const PopupTitle = styled.div`
  height: 24px;
  font-size: 16px;
  color: #333333;
  font-weight: 500;
  text-align: center;
  line-height: 24px;
  margin-bottom: 12px;
`
const FixedButtonBox = styled.div`
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 16px 10px;
  background: #fff;
`
const SelectOrder = (props: SelectOrderType) => {
  const [popupOrderId, setPopupOrderId] = useState(props.value || '')
  const [orderList, setOrderList] = useState<OrderListType[]>([])
  const [orderPopup, setOrderPopup] = useState(false)
  const dispatch = useAppDispatch()
  const { shopId, buyerNick, companyKey, onChange, onSelect } = props
  const handleChange = (value: string) => {
    onChange?.(value)
  }
  const handleBlur = () => {
    props.onBlur?.(props.value || '')
  }
  const handlePopup = () => {
    dispatch(
      flowApi.endpoints.orderList.initiate({
        shopId,
        buyerNick,
        companyKey
      })
    )
      .then(res => {
        const { error, isError, isSuccess, data } = res
        if (isError) {
          showError(error)
        }
        if (isSuccess && data) {
          setOrderList(data)
        }
      })
      .catch(err => {
        showError(err as Error)
      })
      .finally(() => {
        setOrderPopup(true)
      })
  }
  const confirmPopup = () => {
    const orderInfo = orderList.find(order => order.orderNo === popupOrderId)
    const flag = onChange(orderInfo ? popupOrderId : '', orderInfo)
    setOrderPopup(!!flag)
    handleChange(popupOrderId)
    onSelect?.(popupOrderId)
  }
  return (
    <>
      <InputBox className={props.inForm ? 'in-form' : ''}>
        <Input
          placeholder="请输入订单号"
          style={{
            '--color': '#111111',
            '--font-size': '14px'
          }}
          value={props.value}
          onBlur={handleBlur}
          onChange={handleChange}
        />
        <InputRight onClick={handlePopup}>
          <div style={{ marginRight: '6px' }}>选择订单</div>
          <RightOutline fontSize={16} color="#FF5000" />
        </InputRight>
      </InputBox>
      <Popup
        visible={orderPopup}
        showCloseButton={true}
        onMaskClick={() => {
          setOrderPopup(false)
        }}
        onClose={() => {
          setOrderPopup(false)
        }}
        bodyStyle={{
          height: '87vh',
          backgroundColor: '#F2F2F2',
          borderRadius: '20px 20px 0 0'
        }}
      >
        <PopupContentBox>
          <PopupTitle>选择订单</PopupTitle>
          <div style={{ height: 'calc(87vh - 122px)', overflowY: 'auto' }}>
            {!orderList.length ? (
              <ErrorBlock
                title=""
                image={emptyImage}
                status="empty"
                description="暂无数据"
                style={{ '--image-height': '60px' }}
              ></ErrorBlock>
            ) : (
              <Radio.Group
                value={popupOrderId}
                onChange={val => {
                  setPopupOrderId(val as string)
                }}
              >
                {orderList.map(item => {
                  return (
                    <OrderCard {...item} key={item.orderNo}>
                      {item.itemList.map((it, index) => (
                        <OrderCard.ProductItem
                          {...it}
                          key={`${it.numIid}-${`${index}`}`}
                        ></OrderCard.ProductItem>
                      ))}
                    </OrderCard>
                  )
                })}
              </Radio.Group>
            )}
          </div>
          <FixedButtonBox>
            <Button
              block
              shape="rounded"
              color="primary"
              onClick={confirmPopup}
              style={{
                background: 'linear-gradient(270deg, #FF5000 0%, #FF9000 100%)',
                borderColor: 'transparent'
              }}
              disabled={!orderList.length}
            >
              确认选择
            </Button>
          </FixedButtonBox>
        </PopupContentBox>
        <SafeArea position="bottom"></SafeArea>
      </Popup>
    </>
  )
}

export default SelectOrder