import { useState, useEffect } from 'react'
import { ScrollView, Image } from '@tarojs/components'
import './index.scss'

export default function FilterForMore (props) {

  const { change = () => { }, AreaDefault = [], StatusDefault = [], BuildingTypeDefault = [], Cancel = () => { }, BuildingTypeList = [] } = props
  const [Counts, setCounts] = useState(0)
  const [AreaList, setAreaList] = useState([
    { name: '不限', id: '-', Selected: true },
    { name: '60㎡以下', id: '0-60', Selected: false },
    { name: '60-90㎡', id: '60-90', Selected: false },
    { name: '90-110㎡', id: '90-110', Selected: false },
    { name: '110-200㎡', id: '110-200', Selected: false },
    { name: '200㎡以上', id: '200-', Selected: false }
  ])
  const [BuildingTypes, setBuildingTypes] = useState(BuildingTypeList.map((item, index) => { return { ...item, Selected: index === 0 } }))

  const [StatusList, setStatusList] = useState([
    { name: '不限', id: '-', Selected: true },
    { name: '在售', id: '在售', Selected: false },
    { name: '未开盘', id: '未开盘', Selected: false },
    { name: '售罄', id: '售罄', Selected: false }
  ])

  useEffect(() => {
    if(Counts < 3) {
      if(AreaList.length) {
        InitList(AreaList, AreaDefault, (arr) => {
          setAreaList(arr)
          setCounts(Counts + 1)
        })
      }
      if(BuildingTypes.length) {
        InitList(BuildingTypes, BuildingTypeDefault, (arr) => {
          setBuildingTypes(arr)
          setCounts(Counts + 1)
        })
      }
      if(StatusList.length) {
        InitList(StatusList, StatusDefault, (arr) => {
          setStatusList(arr)
          setCounts(Counts + 1)
        })
      }
    }
  }, [AreaList, BuildingTypes, StatusList])

  const InitList = (list, defaultValue, callback = () => {}) => {
    let Arr = list.map((item) => { return { ...item, Selected: false } })
      if (defaultValue.length) {
        defaultValue.map((item) => {
          Arr.map((subItem) => {
            if (item === subItem.id) {
              subItem.Selected = true
            }
          })
        })
      } else {
        Arr[0].Selected = true
      }
      callback(Arr)
  }

  const CutArea = (item, index) => {
    return () => {
      CutFilter(AreaList, item, index, (arr) => {
        setAreaList(arr)
      })
    }
  }

  const CutBuildingType = (item, index) => {
    return () => {
      CutFilter(BuildingTypes, item, index, (arr) => {
        setBuildingTypes(arr)
      })
    }
  }

  const CutStatus = (item, index) => {
    return () => {
      CutFilter(StatusList, item, index, (arr) => {
        setStatusList(arr)
      })
    }
  }

  const CutFilter = (list, item, index, callback = () => { }) => {
    let Arr = [...list]
    if (item.id === '-') {
      if (!item.Selected) {
        Arr.map((aItem) => { if (aItem.id !== '-') aItem.Selected = false })
        Arr[index].Selected = !item.Selected
      }
    } else {
      if (item.Selected) { // 取消单个勾选
        let Bool = false
        Arr.map((aItem) => { if (aItem.Selected && aItem.id !== '-' && item.id !== aItem.id) Bool = true })
        if (!Bool) Arr[0].Selected = true
        Arr[index].Selected = !item.Selected
      } else { // 单个勾选
        Arr[index].Selected = !item.Selected
        let Bool = false
        Arr.map((aItem) => { if (!aItem.Selected && aItem.id !== '-') Bool = true })
        if (!Bool) {
          Arr.map((aItem) => { if (aItem.id !== '-') aItem.Selected = false })
          Arr[0].Selected = true
        } else {
          Arr[0].Selected = false
        }
      }
    }
    callback(Arr)
  }

  const Sure = () => {
    let area = []
    AreaList.map((item) => { if (item.Selected && item.id !== '-') area.push(item.id) })
    let buildingType = []
    BuildingTypes.map((item) => { if (item.Selected && item.id !== '-') buildingType.push(item.id) })
    let marketStatus = []
    StatusList.map((item) => { if (item.Selected && item.id !== '-') marketStatus.push(item.id) })
    change({
      area,
      buildingType,
      marketStatus
    })
  }

  return (
    <view className='components FilterForMore'>
      <ScrollView scroll-y>
        <view className='FilterContent'>
          <text>面积</text>
          {
            AreaList.map((item, index) => (
              <view className='ListItem' key={`AreaListItem${index}`} onClick={CutArea(item, index)}>
                <view>
                  <view>
                    <text>{item.name}</text>
                    <Image mode='heightFix' className={item.Selected ? 'active' : ''} src={require('@/assets/findHouse-icon1.png')}></Image>
                  </view>
                </view>
              </view>
            ))
          }
          <text>类型</text>
          {
            BuildingTypes.map((item, index) => (
              <view className='ListItem' key={`BuildingTypeListItem${index}`} onClick={CutBuildingType(item, index)}>
                <view>
                  <view>
                    <text>{item.name}</text>
                    <Image mode='heightFix' className={item.Selected ? 'active' : ''} src={require('@/assets/findHouse-icon1.png')}></Image>
                  </view>
                </view>
              </view>
            ))
          }
          <text>售卖状态</text>
          {
            StatusList.map((item, index) => (
              <view className='ListItem' key={`StatusListItem${index}`} onClick={CutStatus(item, index)}>
                <view>
                  <view>
                    <text>{item.name}</text>
                    <Image mode='heightFix' className={item.Selected ? 'active' : ''} src={require('@/assets/findHouse-icon1.png')}></Image>
                  </view>
                </view>
              </view>
            ))
          }
          <view className='Btn flex-h'>
            <view className='flex-item'>
              <text onClick={Cancel}>取消</text>
            </view>
            <view className='flex-item'>
              <text onClick={Sure}>保存</text>
            </view>
          </view>
        </view>
      </ScrollView>
    </view>
  )
}
