import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { Div, Image, Text, Button } from 'react-native-magnus';

import { useRequest, useCreation } from '@umijs/hooks';
import { useNavigation } from '@react-navigation/native';

import useModel from 'flooks';
import Detail from './model';
import Plus from '../../components/Plus';

function Item({ info, cartMap, checkgoodsSpecification, changeNum, goDetail }) {
  return (
    <Button bg="hide" p={0} onPress={goDetail} block>
      <Div py={5} px={10} row bg="white" flex={1}>
        <Image
          w={70}
          h={70}
          bg="gray200"
          rounded="sm"
          source={{ uri: info.img }}
        />
        <Div flex={1} ml={5}>
          <Text textAlign="left">{info.name}</Text>
          <Text color="gray300" fontSize="xs" textAlign="left">
            {info.introduction}
          </Text>
          <Text color="gray300" fontSize="xs" textAlign="left">
            月售{info.inventory || 0}
          </Text>
          <Div flex={1} />
          <Div row alignItems="center">
            <Text color="red500" textAlign="left">
              ¥{info.discountAmount || info.amount}
            </Text>
            {!!info.discountAmount && (
              <Text
                color="gray300"
                ml={5}
                fontSize="xs"
                textDecorLine="line-through"
                textDecorColor="gray300"
                textAlign="left"
              >
                ¥{info.amount}
              </Text>
            )}
            <Div flex={1} />
            <Plus
              num={cartMap.has(info.id) ? cartMap.get(info.id).num : 0}
              minus={() => {
                changeNum(
                  cartMap.get(info.id).specIds,
                  cartMap.get(info.id).num - 1
                );
              }}
              plusEvent={() => checkgoodsSpecification(info)}
            />
          </Div>
        </Div>
      </Div>
    </Button>
  );
}
export default function ClassificationList() {
  const navigation = useNavigation();
  const {
    selectClass,
    cartMap,
    checkgoodsSpecification,
    changeNum,
    goodsList,
  } = useModel(Detail, ['selectClass', 'cartMap', 'goodsList']);

  const [typegoodsList, setgoodsList] = React.useState([]);

  const classificationRequest = useRequest(
    `/classification/allGoods?classificationId=${selectClass}`,
    {
      manual: true,
      onSuccess: (result) => {
        // scroll.scrollToOffset(0);
        setgoodsList(
          result.filter((item) => {
            return item;
          }) || []
        );
      },
    }
  );

  const showList = useCreation(() => {
    return typegoodsList.filter((item) => {
      return goodsList.find((goods) => {
        return goods.id === item.id;
      });
    });
  }, [goodsList, typegoodsList]);

  React.useEffect(() => {
    if (selectClass) {
      classificationRequest.run();
    }
  }, [selectClass]);
  // classification;
  return (
    <Div flex={1} bg="white" pb={100}>
      {showList.map((item) => {
        return (
          <Item
            key={item.id}
            info={item}
            cartMap={cartMap}
            checkgoodsSpecification={checkgoodsSpecification}
            changeNum={changeNum}
            goDetail={() =>
              navigation.navigate('GoodsDetail', {
                goodsId: item.id,
              })
            }
          />
        );
      })}
      {showList.length === 0 && (
        <Div px={10} py={20}>
          <Text color="gray300" textAlign="center">
            暂无数据
          </Text>
        </Div>
      )}
    </Div>
  );
}