import * as React from 'react';
import Box from "@mui/material/Box";
import { Grid } from '@mui/material';
import Tab from "@mui/material/Tab";
import TabContext from "@mui/lab/TabContext";
import TabList from "@mui/lab/TabList";
import TabPanel from "@mui/lab/TabPanel";
//registerPlugin(NestedRows);
import Service from './Service';
import {useLocation} from "react-router";
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import Typography from '@mui/material/Typography';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import Accordion from '@mui/material/Accordion';
import AccordionActions from '@mui/material/AccordionActions';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Stack from '@mui/material/Stack';

import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';




  export default function Editable({ initialText,  onChange }) {
    const [isEditing, setIsEditing] = React.useState(false);
    const [textValue, setTextValue] = React.useState(initialText);
    
    React.useEffect(
      () => {
        setTextValue(initialText);
      }, [initialText]
    );
    return (

        <Box>
        {isEditing ? (
            <TextField id="outlined-basic" value={textValue} size="small"
            autoFocus
             variant="outlined"
             onChange={(event) => {
              setTextValue(event.target.value);
              }} 
            onKeyDown={(e)=> {
              if (e.key == "Enter") {
                
                setIsEditing(false);
                onChange(textValue);
                

              }
            }}
            onBlur={()=> {
              setIsEditing(false);
              onChange(textValue);
            }}
            />
          ) : (
            <Button disableRipple variant="text" color="#000000"
               onDoubleClick={()=>{
                setIsEditing(true);
               }}
            >{textValue}</Button>
          )}
        </Box>
    
    );
  }
