import { StyleSheet, Text, View } from "react-native";
import React from "react";
import { useTranslation } from "react-i18next";
import { Button,  Modal, Portal } from "react-native-paper";
import JobIdSearchAndList from "./JobIdSearchAndList";
import { useState } from "react";

function JobSearchModal() {
    const { t } = useTranslation();
  const [visible, setVisible] = useState(false);
  const showModal = () => setVisible(true);
  const hideModal = () => setVisible(false);
  return (
    <View style={{ flex: 1 }}>
      <Portal>
        <Modal
          visible={visible}
          onDismiss={hideModal}
          // eslint-disable-next-line react-native/no-color-literals
          contentContainerStyle={{
            paddingTop: 20,
            paddingBottom: 20,
            margin: 12,
            flex: 1,
            backgroundColor: "white",
          }}
        >
          <JobIdSearchAndList onClose={hideModal}/>
        </Modal>
      </Portal>
      <Button mode="outlined" style={{ margin: 8 }} onPress={showModal}>
        {/* {jobSrchCurrentValueId
          ? jobSrchCurrentValueId === "temp"
            ? t("mediabrowser.labels.temporarystorage")
            : `${
                jobSrchCurrentValue.ro_number
                  ? `${jobSrchCurrentValue.ro_number} - `
                  : ``
              }${jobSrchCurrentValue.ownr_fn || ""} ${
                jobSrchCurrentValue.ownr_ln || ""
              } - ${jobSrchCurrentValue.v_model_yr || ""} ${
                jobSrchCurrentValue.v_make_desc || ""
              } ${jobSrchCurrentValue.v_model_desc || ""}`
          : t("mediabrowser.labels.selectjob")} */}
        {t("mediabrowser.labels.selectjob")}
      </Button>
    </View>
  );
}

export default JobSearchModal;

const styles = StyleSheet.create({});