import React, { ChangeEvent, FC } from 'react';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';

export interface EmailValue {
  to: string;
  content: string;
  subject: string;
}

export const EmailSender: FC<{
  value: EmailValue; onChange: (value: EmailValue) => void
}> = ({ value, onChange }) => {
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    onChange({
      ...value,
      [e.target.name]: e.target.value
    });
  };
  return (
    <Paper sx={{p: 2, mb:2}}>
      <Typography variant="subtitle1" sx={{mb: 1}}>Email Sender</Typography>
      <Box>
        <TextField label="Send To" placeholder="Please enter your email address" type="email"
                   value={value.to} name="to" fullWidth sx={{mb: 4}}
                   onChange={handleChange}
        />
        <TextField label="Subject" placeholder="Please enter your email subject"
                   value={value.subject} name="subject" fullWidth sx={{mb: 4}}
                   onChange={handleChange}
        />
        <TextField label="Content" placeholder="Please enter your email content"
                   value={value.content} name="content" fullWidth sx={{mb: 4}}
                   onChange={handleChange} maxRows={8} minRows={3} multiline
        />
      </Box>
    </Paper>
  );
};