Untitled

import React, { useState, useEffect } from 'react';
import { Grid, FormControl, InputLabel, Select, MenuItem, Button, Box, Typography } from '@mui/material';
import * as XLSX from 'xlsx';

const styles = {
  formControl: {
    '& .MuiInputBase-root': {
      color: '#000000', // Input text color
    },
    '& .MuiInputLabel-root': {
      color: '#0288d1', // Input label color
    },
    '& .MuiSelect-icon': {
      color: '#0288d1', // Dropdown arrow color
    },
    '& .MuiOutlinedInput-root': {
      '& fieldset': {
        borderColor: '#0288d1', // Outline border color
      },
      '&:hover fieldset': {
        borderColor: '#00acc1', // Hover border color
      },
      '&.Mui-focused fieldset': {
        borderColor: '#00acc1', // Focused border color
      },
    },
  },
  button: {
    backgroundColor: '#00acc1', // Custom button color
    color: '#ffffff', // Button text color
    '&:hover': {
      backgroundColor: '#00838f', // Button hover color
    },
  },
  errorText: {
    color: '#d32f2f',
    marginTop: '10px',
  },
};

function ConverterForm({ inputFile, setOutputFile, onInputTypeChange, fileTypeError }) {
  const [inputType, setInputType] = useState('');
  const [outputType, setOutputType] = useState('');

  useEffect(() => {
    onInputTypeChange(inputType);
  }, [inputType, onInputTypeChange]);

  const handleConvert = () => {
    // Conversion logic here
    // const reader = new FileReader();
    // reader.onload = (e) => {
    //   let output;
    //   const data = new Uint8Array(e.target.result);
    //   if (inputType === 'excel') {
    //     const workbook = XLSX.read(data, { type: 'array' });
    //     output = XLSX.write(workbook, { bookType: outputType, type: 'array' });
    //   } else if (inputType === 'csv' || inputType === 'json') {
    //     const text = new TextDecoder().decode(data);
    //     if (inputType === 'csv' && outputType === 'json') {
    //       const csvData = XLSX.utils.sheet_to_json(XLSX.utils.csv_to_sheet(text));
    //       output = new Blob([JSON.stringify(csvData)], { type: 'application/json' });
    //     } else if (inputType === 'json' && outputType === 'csv') {
    //       const jsonData = JSON.parse(text);
    //       const ws = XLSX.utils.json_to_sheet(jsonData);
    //       output = XLSX.write({ SheetNames: ['Sheet1'], Sheets: { Sheet1: ws } }, { bookType: 'csv', type: 'array' });
    //     }
    //   }
    //   setOutputFile(new Blob([output], { type: outputType === 'json' ? 'application/json' : 'text/csv' }));
    // };
    // reader.readAsArrayBuffer(inputFile);
    console.log('file converted');
  };

  return (
    <Box marginTop={2}>
      <Grid container spacing={2}>
        <Grid item xs={12} sm={6}>
          <FormControl fullWidth variant="outlined" style={styles.formControl}>
            <InputLabel>Input File Type</InputLabel>
            <Select value={inputType} onChange={(e) => setInputType(e.target.value)} label="Input File Type">
              <MenuItem value="json">JSON</MenuItem>
              <MenuItem value="csv">CSV</MenuItem>
              <MenuItem value="excel">Excel</MenuItem>
            </Select>
          </FormControl>
        </Grid>
        <Grid item xs={12} sm={6}>
          <FormControl fullWidth variant="outlined" style={styles.formControl}>
            <InputLabel>Output File Type</InputLabel>
            <Select value={outputType} onChange={(e) => setOutputType(e.target.value)} label="Output File Type">
              <MenuItem value="json">JSON</MenuItem>
              <MenuItem value="csv">CSV</MenuItem>
              <MenuItem value="xlsx">Excel</MenuItem>
            </Select>
          </FormControl>
        </Grid>
        {fileTypeError && (
          <Grid item xs={12}>
            <Typography variant="body2" style={styles.errorText}>
              {fileTypeError}
            </Typography>
          </Grid>
        )}
        <Grid item xs={12}>
          <Button
            variant="contained"
            style={styles.button}
            fullWidth
            onClick={handleConvert}
            disabled={Boolean(fileTypeError)}
          >
            Convert
          </Button>
        </Grid>
      </Grid>
    </Box>
  );
}

export default ConverterForm;