/* 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 apiMedicalReportNgoaitru from 'app/api/methods/getMedicalReportNgoaitru';
import { ScrollView } from 'react-native-gesture-handler';
import ButtonInKetQua from 'app/components/ButtonInKetQua';

export default function KetQuaDieuTriNoiTru({ route, navigation }) {
  // const ID_MedicalReport_New = 626579;
  const { ID_MedicalReport_New} = route.params;
  const [luotkham, setLuotkham] = useState([]);
  const [medicalreportnt, setMedicalReportNgoaitru] = useState([]);
  const [tiensubenh, setTienSuBenh] = useState([]);
  const { t, i18n } = useTranslation();
  const [pathURL, setPathURL] = useState('');
  const [NewObjRegex, setNewObjRegex] = useState({});

  useEffect(() => {
    const fetchData = async () => {
      const response = await apiMedicalReportNgoaitru(ID_MedicalReport_New);
      setMedicalReportNgoaitru(response);
      setLuotkham(response.thongtinluotkham);
      setTienSuBenh(response.thongtinluotkham.tiensubenh);
    };
    fetchData();
  }, [ID_MedicalReport_New]);
  // console.log(tiensubenh);
  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('lydokham')}</Text>
            <Text style={{ backgroundColor: 'white', color: 'black', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>
              {
                (medicalreportnt.LyDoKham) ? (((medicalreportnt.LyDoKham).substring(0, 1)).toUpperCase() + (medicalreportnt.LyDoKham).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('tiensubenh')}</Text>
            <View style={{ flexDirection: 'row', marginTop: moderateScale(5) }}>
              <Text style={{ width: '40%', backgroundColor: '#CBC8C8', color: 'black', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>{t('thuocdangdieutri')}:</Text>
              <Text style={{ width: '60%', backgroundColor: 'white', color: 'black', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>
                {
                  (medicalreportnt.ThuocDieuTri) ?

                    (((medicalreportnt.ThuocDieuTri)).substring((medicalreportnt.ThuocDieuTri).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.ThuocDieuTri.indexOf('2./ Xét Nghiệm:')))
                    : ''
                }
              </Text>
            </View>
            <View style={{ flexDirection: 'row', marginTop: moderateScale(5) }}>
              <Text style={{ width: '40%', backgroundColor: '#CBC8C8', color: 'black', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>{t('tiensugiadinh')}:</Text>
              <Text style={{ width: '60%', backgroundColor: 'white', color: 'black', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>
                {
                  (tiensubenh.TienSuNguoiThan) ?
                    (((tiensubenh.TienSuNguoiThan)).substring((tiensubenh.TienSuNguoiThan).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, tiensubenh.TienSuNguoiThan.indexOf('2./ Xét Nghiệm:')))
                    : ''
                }
              </Text>
            </View>
            <View style={{ flexDirection: 'row', marginTop: moderateScale(5) }}>
              <Text style={{ width: '40%', backgroundColor: '#CBC8C8', color: 'black', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>{t('tiensubanthan')}:</Text>
              <Text style={{ width: '60%', backgroundColor: 'white', color: 'black', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>
              {
                  (tiensubenh.TienSu) ?
                    (((tiensubenh.TienSu)).substring((tiensubenh.TienSu).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, tiensubenh.TienSu.indexOf('2./ Xét Nghiệm:')))
                    : ''
                }
              </Text>
            </View>
            <View style={{ flexDirection: 'row', marginTop: moderateScale(5) }}>
              <Text style={{ width: '40%', backgroundColor: '#CBC8C8', color: 'black', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>{t('diung')}:</Text>
              <Text style={{ width: '60%', backgroundColor: 'white', color: 'black', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>
              {
                  (tiensubenh.DiUng) ?
                    (((tiensubenh.DiUng)).substring((tiensubenh.DiUng).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, tiensubenh.DiUng.indexOf('2./ Xét Nghiệm:')))
                    : ''
                }
              </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('khamlamsang')}</Text>
            <Text style={{ backgroundColor: 'white', color: 'black', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>
              {
                (medicalreportnt.MoTaBenh) ? (((medicalreportnt.MoTaBenh).substring(0, 1)).toUpperCase() + (medicalreportnt.MoTaBenh).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.indexOf('2./ Xét Nghiệm:')))
                    : ''
                }
              </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('ketluan')}</Text>
            <Text style={{ backgroundColor: 'white', color: 'black', paddingVertical: moderateScale(5), paddingHorizontal: moderateScale(10) }}>
              {
                (medicalreportnt.KetLuan) ? (((medicalreportnt.KetLuan).substring(0, 1)).toUpperCase() + (medicalreportnt.KetLuan).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('loidanbacsi')}</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_Ngoai) ? (((medicalreportnt.Thuoc_Ngoai).substring(0, 1)).toUpperCase() + (medicalreportnt.Thuoc_Ngoai).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_Ngoai) ? (((medicalreportnt.DinhDuong_Ngoai).substring(0, 1)).toUpperCase() + (medicalreportnt.DinhDuong_Ngoai).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.TapLuyen_Ngoai) ? (((medicalreportnt.TapLuyen_Ngoai).substring(0, 1)).toUpperCase() + (medicalreportnt.TapLuyen_Ngoai).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_Ngoai) ? (((medicalreportnt.YeuToKhac_Ngoai).substring(0, 1)).toUpperCase() + (medicalreportnt.YeuToKhac_Ngoai).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>
    </>
  );
}
