import { useState, useEffect } from 'react';
import { Button, Typography } from '@mui/material';

import FormInput from './FormInput';
import SheetTable from './SheetTable';


// This is a wrapper for google.script.run that lets us use promises.
import { serverFunctions } from '../../utils/serverFunctions';

const SheetEditor = () => {
  const [names, setNames] = useState([]);

  useEffect(() => {
    serverFunctions.getSheetsData().then(setNames).catch(alert);
  }, []);

  const deleteSheet = (sheetIndex) => {
    serverFunctions.deleteSheet(sheetIndex).then(setNames).catch(alert);
  };

  const setActiveSheet = (sheetName) => {
    serverFunctions.setActiveSheet(sheetName).then(setNames).catch(alert);
  };

  const submitNewSheet = async (newSheetName) => {
    try {
      const response = await serverFunctions.addSheet(newSheetName);
      setNames(response);
    } catch (error) {
      // eslint-disable-next-line no-alert
      alert(error);
    }
  };

  return (
    <div style={{ padding: '3px', overflowX: 'hidden' }}>
      <Typography variant="h4" gutterBottom>
        ☀️ MUI demo! ☀️
      </Typography>

      <Typography variant="body1" gutterBottom sx={{ marginBottom: '30px' }}>
        This is a sample app that uses the <code>mui</code> library
        to help us build a simple React app. Enter a name for a new sheet, hit
        enter and the new sheet will be created. Click the red button next to the sheet name to
        delete it.
      </Typography>
      <FormInput submitNewSheet={submitNewSheet} />

      {names.length > 0 &&
        <SheetTable rows={names.map((name) => {
          return {
            sheetName: name.name,
            goToButton: <Button
              variant="outlined"
              disabled={name?.isActive}
              onClick={() => setActiveSheet(name.name)}
            >Go To Sheet</Button>,
            deleteButton: <Button
              variant="contained"
              color="error"
              onClick={() => deleteSheet(name.index)}
            >Delete</Button>
          }
        })} />}
    </div>
  );
};

export default SheetEditor;