import React, { useState } from 'react';
import AceEditor from 'react-ace';
import 'ace-builds/src-noconflict/mode-javascript';
import 'ace-builds/src-noconflict/theme-github';
import mongooseSyntax from './mongooseSyntax.json';
import { Box, Button, Typography, Grid } from '@mui/material';

const initialSchema = `const mongoose = require('mongoose');

const schema = new mongoose.Schema({
  // Add your fields here
});

module.exports = mongoose.model('ModelName', schema);`;

const SchemaBuilder = () => {
  const [schema, setSchema] = useState(initialSchema);

  const addField = (type) => {
    const newField = `\n  fieldName: { type: ${type} },`;
    setSchema((prevSchema) => prevSchema.replace('// Add your fields here', `// Add your fields here${newField}`));
  };

  return (
    <Box sx={{ display: 'flex', height: '100vh' }}>
      <Box
        component="aside"
        sx={{
          width: 300,
          p: 2,
          borderRight: 1,
          borderColor: 'divider',
          overflow: 'auto',
        }}
      >
        <Typography variant="h6" gutterBottom>
          Schema Types
        </Typography>
        <Grid container spacing={1}>
          {mongooseSyntax.types.map((type) => (
            <Grid item xs={6} key={type}>
              <Button variant="contained" onClick={() => addField(type)} fullWidth>
                {type}
              </Button>
            </Grid>
          ))}
        </Grid>
        <Typography variant="h6" gutterBottom sx={{ mt: 2 }}>
          Validators
        </Typography>
        <Grid container spacing={1}>
          {mongooseSyntax.validators.map((validator) => (
            <Grid item xs={6} key={validator}>
              <Button variant="contained" fullWidth>
                {validator}
              </Button>
            </Grid>
          ))}
        </Grid>
        <Typography variant="h6" gutterBottom sx={{ mt: 2 }}>
          Options
        </Typography>
        <Grid container spacing={1}>
          {mongooseSyntax.options.map((option) => (
            <Grid item xs={6} key={option}>
              <Button variant="contained" fullWidth>
                {option}
              </Button>
            </Grid>
          ))}
        </Grid>
      </Box>
      <Box component="main" sx={{ flex: 1, p: 2 }}>
        <AceEditor
          mode="javascript"
          theme="github"
          onChange={setSchema}
          name="mongoose-schema-editor"
          editorProps={{ $blockScrolling: true }}
          value={schema}
          width="100%"
          height="100%"
        />
      </Box>
    </Box>
  );
};

export default SchemaBuilder;