/* eslint-disable prettier/prettier */
/* eslint-disable @typescript-eslint/camelcase */
/* eslint-disable react-native/no-inline-styles */
import apiDonThuoc from 'app/api/methods/getdonthuoc';
import apiThongTinLuotKham from 'app/api/methods/getthongtinluotkham';
import HeaderComponent from 'app/components/HeaderComponent';
import ThongTinLuotKham from 'app/components/ThongTinLuotKham';
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { FlatList, Text, TouchableOpacity, View } from 'react-native';
import { moderateScale } from 'react-native-size-matters';
import { useDispatch } from 'react-redux';

export default function LuotKham({ route, navigation }) {
  const dispatch = useDispatch();
  //const { ID_LuotKham, ID_BenhNhan } = route.params;

  const ID_LuotKham = 2009384;
  const ID_BenhNhan = 597882;
  const [donthuoc, setDonThuoc] = useState([0]);
  const [luotkham, setLuotkham] = useState([]);
  const [stickyHeaderIndices, setStickyHeaderIndices] = useState([0]);

  const { t, i18n } = useTranslation();
  const renderSeparator = () => (
    <View
      style={{
        backgroundColor: 'black',
        height: 0.5,
        marginTop: 5,
        marginBottom: 5,
      }}
    />
  );
  function renderItem({ item }) {
    if (item) {
      if (item.header) {
        return (
          <View style={{ backgroundColor: '#F2F2F2' }}>
            <Text style={{ textTransform: 'uppercase', fontWeight: 'bold', fontStyle: 'italic', color: '#0FA5A9', marginBottom: moderateScale(5) }}>{item.name}</Text>
          </View>
        );
      }
      else {
        return (
          <View style={{ flexDirection: 'row' }}>
            <View style={{ flex: 3, borderRightWidth: 2, borderColor: '#CCCCCD' }}>
              <Text style={{ fontWeight: 'bold' }}>{item.TenGoc}</Text>
              <Text>Cách dùng: {item.CachDung}</Text>
            </View>
            <Text style={{ fontWeight: 'bold', flex: 1.2, textAlign: 'center', borderRightWidth: 2, borderColor: '#CCCCCD' }}>{item.SoThuocDeNghiTheoDon}</Text>
            <Text style={{ fontWeight: 'bold', flex: 1, textAlign: 'center' }}>{item.dm_donvitinh.TenDonViTinh}</Text>
          </View>
        );
      }
    }
  }

  useEffect(() => {
    const fetchData = async () => {
      const response = await apiDonThuoc(ID_LuotKham);
      setDonThuoc(response);
      const arr: any[] | ((prevState: number[]) => number[]) = [];
      response.map((obj: { header: any }, index: any) => {
        if (obj.header) {
          arr.push(`t(${index})`);
        }
      });
      setStickyHeaderIndices(arr);
    };
    fetchData();
  }, [ID_LuotKham]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await apiThongTinLuotKham(ID_LuotKham);
      setLuotkham(response);
    };
    fetchData();
  }, [ID_BenhNhan]);
  //
  const styleTextColumn = {
    textTransform: 'uppercase',
    fontWeight: 'bold',
    textAlign: 'center',
  };

  return (
    <>
      <HeaderComponent title={t('donthuoc')}/>
      <View style={{ flex: 1, marginVertical: moderateScale(15), paddingHorizontal: moderateScale(10) }}>
        <ThongTinLuotKham {...luotkham} />

        <View style={{ flexDirection: 'row', marginTop: moderateScale(20), marginBottom: moderateScale(10), borderBottomWidth: 2, borderColor: '#CCCCCD', paddingBottom: moderateScale(10) }}>
          <Text style={{ flex: 3, borderRightWidth: 2, borderColor: '#CCCCCD', ...styleTextColumn }}>{t('tenthuoc')}</Text>
          <Text style={{ flex: 1.2, borderRightWidth: 2, borderColor: '#CCCCCD', ...styleTextColumn }}>{t('soluong')}</Text>
          <Text style={{ flex: 1, ...styleTextColumn }}>{t('donvi')}</Text>
        </View>
        <FlatList
          horizontal={false}
          data={donthuoc}
          renderItem={renderItem}
          keyExtractor={(item, index) => 'id' + index}
          stickyHeaderIndices={stickyHeaderIndices}
        />
        <View
          style={{
            borderTopWidth: 2,
            borderColor: '#CCCCCD',
            paddingVertical: moderateScale(2),
            flexDirection: 'row',
            alignItems: 'flex-end',
            flexWrap: 'wrap',
            justifyContent: 'flex-end',
          }}>
          <View style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'flex-end',
              right: 0,
            }}>
            {/* <View>
              <View style={{ marginBottom: 10, flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }}>
                <Text>{t('trangthai')}</Text>
                <View style={{
                  // width: 125,
                  backgroundColor: '#0FA5A9',
                  paddingVertical: 10,
                  paddingHorizontal: 10,
                  borderRadius: 5,
                  marginLeft: 10,
                }}>
                  <Text style={{ color: 'white', fontWeight: 'bold' }}>Đã tư vấn</Text>
                </View>
              </View>
              <Text>BS. Phan Thị Thanh Xuân</Text>
            </View> */}
            <TouchableOpacity  style={{
                backgroundColor: '#F3A913',
                padding: moderateScale(10),
                borderRadius: 5,
                marginVertical: moderateScale(6),
                marginHorizontal: moderateScale(6),
              }}>
              <Text style={{ color: 'white', textAlign: 'center' }}>{t('indonthuoc')}</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </>
  );
}