import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux'
import {
  SafeAreaView,
  Text,
  TouchableOpacity,
  View, FlatList
} from 'react-native';
import { useNavigation } from '@react-navigation/core';
import styles from './index.style';
import Header from '../../components/Header';
import IconMedlink from '../../components/IconMedlink';
import HeaderTitle from '../../components/HeaderTitle';
import { addProductToInvoice } from '../../redux/actions/invoice';

import { ScrollView } from 'react-native-gesture-handler';
import { addProductFromApiListener } from '../../redux/actions/product';
import ItemProduct from '../../components/ItemProduct';
import { addProductToCart } from '../../redux/actions/cart';
import { Cart, Product } from "../../model/cart";
import { Data } from '../../model/product';
import { RootState } from '../../redux/reducers';
import IconBack from '../../components/IconBack';

const App = () => {

  //data product-------------------------------------------------------
  const products = useSelector((state: RootState) => state.product.data)
  console.log('Product: ', products)
  //-------------------------------------------------------------------
  const _renderHeaderLeft = () => {
    return (
      <TouchableOpacity onPress={() => navigation.goBack()}>
        <IconBack />
      </TouchableOpacity>
    )
  }
  const _renderHeaderCenter = () => {
    return (
      <HeaderTitle title='Sản phẩm trong kho' />
    )
  }
  const _renderHeaderRight = () => {
    return (
      <TouchableOpacity onPress={() => navigation.goBack()}>
        <Text style={styles.rightHeader}>Hoàn thành</Text>
      </TouchableOpacity>
    )
  }
  const _renderHeader = () => (
    <Header
      elementLeft={_renderHeaderLeft()}
      elementCenter={_renderHeaderCenter()}
      elementRight={_renderHeaderRight()}
    />
  )

  const ItemSeparatorView = () => {
    return (
      // Flat List Item Separator ______________________________________________
      <View
        style={{
          height: 1,
          width: '100%',
          backgroundColor: '#C8C8C8',
        }}
      />
    );
  };

  const _renderListProduct = (product: Data) => {
    return (
      <TouchableOpacity onPress={() => { addToCart(product) }}>
        <ItemProduct
          image_url={product.image_url}
          drg_drug_cd={product.drg_drug_cd}
          drg_drug_name={product.drg_drug_name}
          lot={product.lot}
          quantity={product.quantity}
          exp_date={product.exp_date}
        />
      </TouchableOpacity>
    )
  }
  const addToCart = (product: Data) => {
    const data = {

      drg_drug_cd: product.drg_drug_cd,
      drg_drug_name: product.drg_drug_name,
      drug_id: product.drug_id,
      drug_unit_id: product.drug_unit_id,
      dosage: product.dosage,
      inv_id: product.inv_id,
      lot: product.lot,
      price: product.price,
      unit_name: product.unit_name,

      quantity: 2,
      base_quantity: 1,
      discount: 0,
      discount_type: "VNĐ",
      discount_unit: 0,
      import_price: 0,
      promotion_flg: 0,
      unit_id: 14

    }
    dispatch(addProductToCart(data))
  }

  const _renderButtonSubmit = () => (
    <TouchableOpacity style={styles.buttonSubmit}
      onPress={() => { }}>
      <Text>TẠO</Text>
    </TouchableOpacity>
  )
  //------------------------------------------------------------
  const navigation = useNavigation()
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(addProductFromApiListener(''))
    return () => { }
  }, [])

  //------------------------------------------------------------
  return (
    <SafeAreaView>
      {_renderHeader()}
      <View >
        <FlatList
          data={products}
          ItemSeparatorComponent={ItemSeparatorView}
          renderItem={({ item }) => _renderListProduct(item)}
        />
        {/* {_renderButtonSubmit()} */}
      </View>
    </SafeAreaView>
  );
}

export default App;
