import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { StyleSheet, FlatList } from 'react-native';
import { Div, Text } from 'react-native-magnus';
import { TouchableRipple } from 'react-native-paper';

import { useRequest } from '@umijs/hooks';

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

function Item({ name, isChoose, select }) {
  return (
    <TouchableRipple onPress={select}>
      <Div py={10} px={20} bg={isChoose ? 'white' : ''}>
        <Text color={isChoose ? 'brand500' : ''} textAlign="left">
          {name}
        </Text>
      </Div>
    </TouchableRipple>
  );
}
export default function Classification({ height }) {
  const { id, selectClass, changeSelectClass } = useModel(Detail, [
    'id',
    'selectClass',
  ]);

  const [classifications, setclassifications] = React.useState([]);

  useRequest(
    () => {
      const params = {
        query: {
          merchantId: id,
          isOpen: true,
        },
        page: 0,
        size: 100,
      };
      const urls = Object.keys(params).map((item) => {
        return `${item}=${encodeURI(JSON.stringify(params[item]))}`;
      });
      return `/classification/all?${urls.join('&')}`;
    },
    {
      refreshDeps: [id],
      onSuccess: (result) => {
        setclassifications(result.content);
        if (!result.empty) {
          changeSelectClass(result.content[0].id);
        }
      },
    }
  );
  // classification;
  return (
    <Div maxW={95} w={95} pb={100}>
      {classifications.map((item) => {
        return (
          <Item
            key={item.id}
            name={item.name}
            isChoose={selectClass === item.id}
            select={() => {
              changeSelectClass(item.id);
            }}
          />
        );
      })}
    </Div>
  );
}

const styles = StyleSheet.create({
  left: {
    width: 95,
    maxWidth: 95,
    paddingBottom: 100,
  },
  item: {
    paddingHorizontal: 15,
    paddingVertical: 10,
  },
});