FPSMS-frontend/src/components/FinishedGoodSearch/EscalationComponent.tsx

import React, { useState, ChangeEvent, FormEvent, Dispatch } from 'react';
import {
    Box,
    Button,
    Collapse,
    FormControl,
    InputLabel,
    Select,
    MenuItem,
    TextField,
    Checkbox,
    FormControlLabel,
    Paper,
    Typography,
    RadioGroup,
    Radio,
    Stack,
    Autocomplete,
} from '@mui/material';
import { SelectChangeEvent } from '@mui/material/Select';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
import { useTranslation } from 'react-i18next';

interface NameOption {
    value: string;
    label: string;
}

interface FormData {
    name: string;
    quantity: string;
    message: string;
}

interface Props {
    forSupervisor: boolean
    isCollapsed: boolean
    setIsCollapsed: Dispatch<React.SetStateAction<boolean>>
}
const EscalationComponent: React.FC<Props> = ({ 
    forSupervisor,
    isCollapsed,
    setIsCollapsed
 }) => {
    const { t } = useTranslation("purchaseOrder");
    
    const [formData, setFormData] = useState<FormData>({
        name: '',
        quantity: '',
        message: '',
    });

    const nameOptions: NameOption[] = [
        { value: '', label: '請選擇姓名...' },
        { value: 'john', label: '張大明' },
        { value: 'jane', label: '李小美' },
        { value: 'mike', label: '王志強' },
        { value: 'sarah', label: '陳淑華' },
        { value: 'david', label: '林建國' },
    ];

    const handleInputChange = (
        event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | SelectChangeEvent<string>
    ): void => {
        const { name, value } = event.target;
        setFormData((prev) => ({
            ...prev,
            [name]: value,
        }));
    };

    const handleSubmit = (e: FormEvent<HTMLFormElement>): void => {
        e.preventDefault();
        console.log('表單已提交:', formData);
        // 處理表單提交
    };

    const handleCollapseToggle = (e: ChangeEvent<HTMLInputElement>): void => {
        setIsCollapsed(e.target.checked);
    };

    return (
        // <Paper elevation={3} sx={{ maxWidth: 400, mx: 'auto', p: 3 }}>
        <>
        <Paper>
        {/* <Paper elevation={3} sx={{ mx: 'auto', p: 3 }}> */}
            <Box  sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
                <FormControlLabel
                    control={
                        <Checkbox
                            checked={isCollapsed}
                            onChange={handleCollapseToggle}
                            color="primary"
                        />
                    }
                    label={
                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
                            <Typography variant="body1">上報結果</Typography>
                            {isCollapsed ? (
                                <ExpandLessIcon sx={{ ml: 1 }} />
                            ) : (
                                <ExpandMoreIcon sx={{ ml: 1 }} />
                            )}
                        </Box>
                    }
                />
            </Box>
            <Collapse in={isCollapsed}>
                <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                    {forSupervisor ? (
                        <FormControl>
                            <RadioGroup
                                row
                                aria-labelledby="demo-radio-buttons-group-label"
                                defaultValue="pass"
                                name="radio-buttons-group"
                            >
                                <FormControlLabel value="pass" control={<Radio />} label="合格" />
                                <FormControlLabel value="fail" control={<Radio />} label="不合格" />
                            </RadioGroup>
                        </FormControl>
                    ): undefined}
                    <FormControl fullWidth>
                        <select
                            id="name"
                            name="name"
                            value={formData.name}
                            onChange={handleInputChange}
                            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white"
                        >
                            {nameOptions.map((option: NameOption) => (
                                <option key={option.value} value={option.value}>
                                    {option.label}
                                </option>
                            ))}
                        </select>
                    </FormControl>
                    <TextField
                        fullWidth
                        id="quantity"
                        name="quantity"
                        label="數量"
                        type="number"
                        value={formData.quantity}
                        onChange={handleInputChange}
                        InputProps={{ inputProps: { min: 1 } }}
                        placeholder="請輸入數量"
                    />

                    <TextField
                        fullWidth
                        id="message"
                        name="message"
                        label="備註"
                        multiline
                        rows={4}
                        value={formData.message}
                        onChange={handleInputChange}
                        placeholder="請輸入您的備註"
                    />

                    <Stack direction="row" justifyContent="flex-end" gap={1}>
                        <Button
                            type="submit"
                            variant="contained"
                            color="primary"
                        >
                            {t("update qc info")}
                        </Button>
                    </Stack>
                </Box>
            </Collapse>
        </Paper>
        </>
    );
}

export default EscalationComponent;