/* eslint-disable prettier/prettier */
/* eslint-disable @typescript-eslint/camelcase */
/* eslint-disable react-native/no-inline-styles */
import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, TouchableOpacity, Image } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { useTranslation } from 'react-i18next';
import HeaderComponent from 'app/components/HeaderComponent';
import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
import { Icon } from 'react-native-elements';
import ThongTinLuotKham from 'app/components/ThongTinLuotKham';
import apiMedicalReportNoitru from 'app/api/methods/getMedicalReportNoitru';
import { ScrollView } from 'react-native-gesture-handler';
import ButtonInketqua from 'app/components/ButtonInKetQua';

export default function KetQuaDieuTriNoiTru({ route, navigation }) {
   //const ID_MedicalReport_NT = 64056;
  const { ID_MedicalReport_NT} = route.params;
  const [pathURL, setPathURL] = useState('');
  const [NewObjRegex, setNewObjRegex] = useState({});
  const [luotkham, setLuotkham] = useState([]);
  const [medicalreportnt, setMedicalReportNoitru] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await apiMedicalReportNoitru(ID_MedicalReport_NT);
      setMedicalReportNoitru(response);
      setLuotkham(response.thongtinluotkham);
    };
    fetchData();
  }, [ID_MedicalReport_NT]);

  const { t, i18n } = useTranslation();
  // console.log(medicalreportnt); medicalreportnt.LyDoNhapVien

  return (
    <>
      <HeaderComponent title={'ketquadieutringoaitru'} />

      <View style={{ flex: 1, marginTop: moderateScale(15), paddingHorizontal: moderateScale(10) }}>
        <ThongTinLuotKham {...luotkham} />
        <ScrollView>
          <View style={{ marginVertical: moderateScale(10) }}>
            <Text style={{ width: '40%', backgroundColor: '#0FA5A9', color: 'white', fontWeight: 'bold', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>{t('lydonhapvien')}</Text>
            <Text style={{ backgroundColor: 'white', color: 'black', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>
              {
                (medicalreportnt.LyDoNhapVien) ? (((medicalreportnt.LyDoNhapVien).substring(0, 1)).toUpperCase() + (medicalreportnt.LyDoNhapVien).substring(1)).trim() : ''
              }
            </Text>
          </View>
          <View style={{ marginBottom: moderateScale(10) }}>
            <Text style={{ width: '40%', backgroundColor: '#0FA5A9', color: 'white', fontWeight: 'bold', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>{t('phuongphapdieutri')}</Text>
            <Text style={{ backgroundColor: 'white', color: 'black', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>
              {
                (medicalreportnt.PhuongPhapDieuTri) ? (((medicalreportnt.PhuongPhapDieuTri).substring(0, 1)).toUpperCase() + (medicalreportnt.PhuongPhapDieuTri).substring(1)).trim() : ''
              }
            </Text>
          </View>
          <View style={{ marginBottom: moderateScale(10) }}>
            <Text style={{ width: '40%', backgroundColor: '#0FA5A9', color: 'white', fontWeight: 'bold', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>{t('tomtatquatrinhdieutri')}</Text>
            <Text style={{ backgroundColor: 'white', color: 'black', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>
              {
                (medicalreportnt.QuaTrinhDieuTri_NT) ? (((medicalreportnt.QuaTrinhDieuTri_NT).substring(0, 1)).toUpperCase() + (medicalreportnt.QuaTrinhDieuTri_NT).substring(1)).trim() : ''
              }
            </Text>
          </View>
          <View style={{ marginBottom: moderateScale(10) }}>
            <Text style={{ width: '40%', backgroundColor: '#0FA5A9', color: 'white', fontWeight: 'bold', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>{t('canlamsang')}</Text>
            <View style={{ flexDirection: 'row', marginTop: moderateScale(5) }}>
              <Text style={{ width: '40%', backgroundColor: '#CBC8C8', color: 'black', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>{t('chandoanhinhanh-thamdochucnang')}:</Text>
              <Text style={{ width: '60%', backgroundColor: 'white', color: 'black', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>
                {
                  (medicalreportnt.CanLamSang) ?
                    (medicalreportnt.CanLamSang.substring(medicalreportnt.CanLamSang.indexOf('1./ Chẩn đoán hình ảnh - thăm dò chức năng:') + ('1./ Chẩn đoán hình ảnh - thăm dò chức năng:').length, medicalreportnt.CanLamSang.lastIndexOf('2./ Xét nghiệm:'))).trim().replace(/<b>/g, '').replace(/<\/b>/g, '').replace(/<br>/g, '\n')
                    : ''
                }
              </Text>
            </View>
            <View style={{ flexDirection: 'row', marginTop: moderateScale(5) }}>
              <Text style={{ width: '40%', backgroundColor: '#CBC8C8', color: 'black', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>{t('xetnghiem')}:</Text>
              <Text style={{ width: '60%', backgroundColor: 'white', color: 'black', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>
                {
                  (medicalreportnt.CanLamSang) ?
                    (medicalreportnt.CanLamSang.substring(medicalreportnt.CanLamSang.indexOf('2./ Xét nghiệm:') + ('2./ Xét nghiệm:').length)).trim().replace(/<b>/g, '').replace(/<\/b>/g, '').replace(/<br>/g, '\n')
                    : ''
                }
              </Text>
            </View>
          </View>
          <View style={{ marginBottom: moderateScale(10) }}>
            <Text style={{ width: '40%', backgroundColor: '#0FA5A9', color: 'white', fontWeight: 'bold', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>{t('loidancuabacsi')}</Text>
            <View style={{ flexDirection: 'row', marginTop: moderateScale(5) }}>
              <Text style={{ width: '40%', backgroundColor: '#CBC8C8', color: 'black', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>{t('thuoc')}:</Text>
              <Text style={{ width: '60%', backgroundColor: 'white', color: 'black', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>
                {
                  (medicalreportnt.Thuoc_NT) ? (((medicalreportnt.Thuoc_NT).substring(0, 1)).toUpperCase() + (medicalreportnt.Thuoc_NT).substring(1)).trim().replace(/<b>/g, '').replace(/<\/b>/g, '').replace(/<br>/g, '\n') : ''
                }
              </Text>
            </View>
            <View style={{ flexDirection: 'row', marginTop: moderateScale(5) }}>
              <Text style={{ width: '40%', backgroundColor: '#CBC8C8', color: 'black', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>{t('chedodinhduong')}:</Text>
              <Text style={{ width: '60%', backgroundColor: 'white', color: 'black', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>
                {
                  (medicalreportnt.DinhDuong_NT) ? (((medicalreportnt.DinhDuong_NT).substring(0, 1)).toUpperCase() + (medicalreportnt.DinhDuong_NT).substring(1)).trim().replace(/<b>/g, '').replace(/<\/b>/g, '').replace(/<br>/g, '\n') : ''
                }
              </Text>
            </View>
            <View style={{ flexDirection: 'row', marginTop: moderateScale(5) }}>
              <Text style={{ width: '40%', backgroundColor: '#CBC8C8', color: 'black', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>{t('chedoluyentap')}:</Text>
              <Text style={{ width: '60%', backgroundColor: 'white', color: 'black', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>
                {
                  (medicalreportnt.LuyenTap_NT) ? (((medicalreportnt.LuyenTap_NT).substring(0, 1)).toUpperCase() + (medicalreportnt.LuyenTap_NT).substring(1)).trim().replace(/<b>/g, '').replace(/<\/b>/g, '').replace(/<br>/g, '\n') : ''
                }
              </Text>
            </View>
            <View style={{ flexDirection: 'row', marginTop: moderateScale(5) }}>
              <Text style={{ width: '40%', backgroundColor: '#CBC8C8', color: 'black', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>{t('cacyeutokhac')}:</Text>
              <Text style={{ width: '60%', backgroundColor: 'white', color: 'black', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>
                {
                  (medicalreportnt.YeuToKhac_NT) ? (((medicalreportnt.YeuToKhac_NT).substring(0, 1)).toUpperCase() + (medicalreportnt.YeuToKhac_NT).substring(1)).trim().replace(/<b>/g, '').replace(/<\/b>/g, '').replace(/<br>/g, '\n') : ''
                }
              </Text>
            </View>
            <View style={{ flexDirection: 'row', marginTop: moderateScale(5) }}>
              <Text style={{ width: '40%', backgroundColor: '#CBC8C8', color: 'black', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>{t('taikham')}:</Text>
              <Text style={{ width: '60%', backgroundColor: 'white', color: 'black', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>
                {
                  (medicalreportnt.TaiKham_NT) ? (((medicalreportnt.TaiKham_NT).substring(0, 1)).toUpperCase() + (medicalreportnt.TaiKham_NT).substring(1)).trim().replace(/<b>/g, '').replace(/<\/b>/g, '').replace(/<br>/g, '\n') : ''
                }
              </Text>
            </View>
          </View>
        </ScrollView>
        {/* <View
          style={{
            borderTopWidth: 2,
            borderColor: '#CCCCCD',
            paddingVertical: moderateScale(12),
            flexDirection: 'row',
            alignItems: 'center',
            flexWrap: 'wrap',
            justifyContent: 'center',
          }}>
          <View style={{ flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center', flex: 1 }}>
            <TouchableOpacity style={{ backgroundColor: '#F3A913', padding: moderateScale(10), borderRadius: 5 }}>
              <Text style={{ color: 'white', textAlign: 'right' }}>{t('inketqua')}</Text>
            </TouchableOpacity>
          </View>
        </View> */}
        <ButtonInketqua
        style={{
          borderTopWidth: 2,
          borderColor: '#CCCCCD',
          paddingVertical: moderateScale(2),
          flexDirection: 'row',
          alignItems: 'flex-end',
          flexWrap: 'wrap',
          justifyContent: 'flex-end',
        }}
        pathURL={pathURL}
        regex={NewObjRegex}
        {...medicalreportnt}
      />
      </View>
    </>
  );
}
