import { Button, Navigator, ScrollView, Text, View } from "@tarojs/components"
import { memo, useEffect, useState } from "react"
import "./index.scss"
import {addressListApi} from "@/api/addressManager"

interface Params{
  refresherEnabled?: boolean,//是否开启刷新
  onSelect?: (item:any,index:number)=>void,//列表选择
  addButtonEnabled?: boolean, //是否显示添加按钮
  focusBorderEnabled?: boolean, //焦点显示蓝色边框
  id?: number, //默认选择值
}

// 地址列表
const AddressList = memo((props:Params)=>{
  const {addButtonEnabled=true,focusBorderEnabled=false} = props;
  const {fetchData, state} = addressListApi()
  // 获取数据
  const getData = async ()=>{
    const result = await fetchData();
    if(props.id){
      setFocusId(props.id as any);
    }else{
      result.data.list?.every(item=>{
        if(item.is_default){
          setFocusId(item.id);
          return false;
        }
        return true;
      })
    }
  }
  useEffect(()=>{
    getData();
  },[])

  // 处理刷新
  const [refreshState, setRefreshState] = useState(false);
  const handleRefresh = async ()=>{
    setRefreshState(true);
    await getData();
    setRefreshState(false);
  }
  const data = Array.from({length:15});
  // 焦点
  const [focusId, setFocusId] = useState();
  // 列表选择
  const handleSelect = (item: any, index: number)=>{
    props.onSelect&&props.onSelect(item,index);
    if(focusBorderEnabled){
      setFocusId(item?.id);
    }
  }

  return (
    <View className="address-scroll-view">
      <ScrollView scrollY refresherEnabled={props.refresherEnabled} enhanced refresherTriggered={refreshState} onRefresherRefresh={handleRefresh}>
        {
          state?.data?.list?.length>0?
          state?.data?.list?.map((item,index)=>{
          // data.length>0?
          // data.map((item,index)=>{
            return(
              <View onClick={()=>handleSelect(item,index)} className={`address-list ${focusId==item.id&&'address-active'}`}>
                <View className="address-user">
                  {item.name}
                  {
                    item.is_default?<Text className="address-list-default">默认</Text>:
                    <Text className="address-list-phone">{item.phone}</Text>
                  }
                </View>
                <View className="address-list-bottom">
                  <View className="address-list-info">
                    {/* **省**市**区**街道****仓库 */}
                    {item.province_name+item.city_name+item.district_name} {item.address_detail}
                    {
                      item.is_default&&<Text className="address-list-phone">{item.phone}</Text>
                    }
                  </View>
                  <Navigator url={`/pages/addressAdd/index?type=edit&id=${item.id}`} hoverClass="none" className="address-edit">
                    <Text className="iconfont icon-bianji"></Text>
                  </Navigator>
                </View>
              </View>
            );
          }):
          addButtonEnabled&&<View className="address-no-data">暂未添加地址</View>
        }
      </ScrollView>
      <Navigator url="/pages/addressAdd/index?type=add" hoverClass="none" className="add-address">添加收货地址</Navigator>
    </View>
  )
})

export default AddressList;