import { Grid, Stack, TextField } from "@mui/material";
import { Controller } from "react-hook-form";
import PersianTextField from "@/core/components/PersianTextField";
import ImageUpload from "@/components/dashboard/damages/operator/Actions/create/Forms/ImageUpload";

const MachineInfo = ({ control }) => {
    return (
        <Stack spacing={2}>
            <Stack>
                <Grid container spacing={2}>
                    <Grid item xs={12} md={4}>
                        <Controller
                            name="machines_light"
                            control={control}
                            render={({ field: { onChange, value }, fieldState: { error } }) => (
                                <TextField
                                    fullWidth
                                    size="small"
                                    label="تعداد ماشین آلات سبک"
                                    value={value}
                                    placeholder="تعداد ماشین آلات سبک را وارد کنید"
                                    error={!!error}
                                    helperText={error ? error.message : null}
                                    variant="outlined"
                                    InputLabelProps={{ shrink: true }}
                                    type={"tel"}
                                    inputProps={{
                                        inputMode: "number",
                                        min: 0,
                                        pattern: "[0-9]*",
                                    }}
                                    onChange={(event) => {
                                        const inputValue = event.target.value;
                                        if (isNaN(Number(inputValue))) {
                                            return;
                                        }
                                        onChange(inputValue);
                                    }}
                                />
                            )}
                        />
                    </Grid>
                    <Grid item xs={12} md={4}>
                        <Controller
                            name="machines_sheavy"
                            control={control}
                            render={({ field: { onChange, value }, fieldState: { error } }) => (
                                <TextField
                                    fullWidth
                                    size="small"
                                    label="تعداد ماشین آلات نیمه سنگین"
                                    value={value}
                                    placeholder="تعداد ماشین آلات نیمه سنگین را وارد کنید"
                                    error={!!error}
                                    helperText={error ? error.message : null}
                                    variant="outlined"
                                    InputLabelProps={{ shrink: true }}
                                    type={"tel"}
                                    inputProps={{
                                        inputMode: "number",
                                        min: 0,
                                        pattern: "[0-9]*",
                                    }}
                                    onChange={(event) => {
                                        const inputValue = event.target.value;
                                        if (isNaN(Number(inputValue))) {
                                            return;
                                        }
                                        onChange(inputValue);
                                    }}
                                />
                            )}
                        />
                    </Grid>
                    <Grid item xs={12} md={4}>
                        <Controller
                            name="machines_heavy"
                            control={control}
                            render={({ field: { onChange, value }, fieldState: { error } }) => (
                                <TextField
                                    fullWidth
                                    size="small"
                                    label="تعداد ماشین آلات سنگین"
                                    value={value}
                                    placeholder="تعداد ماشین آلات سنگین را وارد کنید"
                                    error={!!error}
                                    helperText={error ? error.message : null}
                                    variant="outlined"
                                    InputLabelProps={{ shrink: true }}
                                    type={"tel"}
                                    inputProps={{
                                        inputMode: "number",
                                        min: 0,
                                        pattern: "[0-9]*",
                                    }}
                                    onChange={(event) => {
                                        const inputValue = event.target.value;
                                        if (isNaN(Number(inputValue))) {
                                            return;
                                        }
                                        onChange(inputValue);
                                    }}
                                />
                            )}
                        />
                    </Grid>
                </Grid>
            </Stack>
            <Stack>
                <Grid container spacing={2}>
                    <Grid item xs={12} md={6}>
                        <Controller
                            name="overview_files_1"
                            control={control}
                            render={({ field, fieldState: { error } }) => (
                                <ImageUpload
                                    name={field.name}
                                    value={field.value}
                                    error={error}
                                    onChange={field.onChange}
                                    title={"نمای کلی از راهداری"}
                                />
                            )}
                        />
                    </Grid>
                    <Grid item xs={12} md={6}>
                        <Controller
                            name="overview_files_2"
                            control={control}
                            render={({ field, fieldState: { error } }) => (
                                <ImageUpload
                                    name={field.name}
                                    value={field.value}
                                    error={error}
                                    onChange={field.onChange}
                                    title={"آشیانه ماشین آلات"}
                                />
                            )}
                        />
                    </Grid>
                </Grid>
            </Stack>
            <Stack>
                <Grid container spacing={2}>
                    <Grid item xs={12} md={6}>
                        <Controller
                            name="overview_files_3"
                            control={control}
                            render={({ field, fieldState: { error } }) => (
                                <ImageUpload
                                    name={field.name}
                                    value={field.value}
                                    error={error}
                                    onChange={field.onChange}
                                    title={"انباری شن و ماسه"}
                                />
                            )}
                        />
                    </Grid>
                    <Grid item xs={12} md={6}>
                        <Controller
                            name="overview_files_4"
                            control={control}
                            render={({ field, fieldState: { error } }) => (
                                <ImageUpload
                                    name={field.name}
                                    value={field.value}
                                    error={error}
                                    onChange={field.onChange}
                                    title={"محیط کاری"}
                                />
                            )}
                        />
                    </Grid>
                </Grid>
            </Stack>
            <Stack>
                <Grid container spacing={2}>
                    <Grid item xs={12} md={12}>
                        <Controller
                            name="overview_files_5"
                            control={control}
                            render={({ field, fieldState: { error } }) => (
                                <ImageUpload
                                    name={field.name}
                                    value={field.value}
                                    error={error}
                                    onChange={field.onChange}
                                    title={"سایر تصاویر"}
                                />
                            )}
                        />
                    </Grid>
                </Grid>
            </Stack>
        </Stack>
    );
};
export default MachineInfo;