import { TextField, Checkbox, InputLabel, MenuItem, Select, FormControl } from "@mui/material";

export function PasswordInput ({field, name, label, placeholder, errors, style=''}) {
    return (
        <TextField 
            {...field}
            id={name} type="password" 
            variant="outlined" 
            label={label} placeholder={placeholder} 
            helperText= {errors ? errors.message : ""}
            error={errors ? Boolean(true) : Boolean(false)}
            className={`${style}`}
        />
    )
}

export function TextInput ({field, name, label, placeholder, errors, style=''}) {
    return (
        <TextField 
            {...field}
            id={name} type="text" 
            variant="outlined"
            label={label} placeholder={placeholder} 
            helperText= {errors ? errors.message : ""}
            error={errors ? Boolean(true) : Boolean(false)}
            className={`${style}`}
        />
    )
}

export function CustomTextArea ({field, label, errors, style=''}) {
    return(
        <TextField 
            {...field}
            id={label} type="text"
            multiline minRows={3}
            label={label}
            helperText= {errors ? errors.message : ""}
            error={errors ? Boolean(true) : Boolean(false)}
            className={`${style}`}
        />
    )
}



export function CustomSelector ({ label, category, categoryData, setCategoryData, style}){
    const { v4: uuidv4 } = require('uuid');
    const isAllSelected = category.length > 0 && categoryData?.length === category.length;

    const handleChange = (event) => {
        const value = event.target.value;
        if (value[value.length - 1] === "all") {
            setCategoryData(categoryData?.length === category.length ? [] : category);
            return;
        }
        setCategoryData(value);
    };
    return(
        <FormControl sx={{ width: '100%' }} >
        <InputLabel>{label}</InputLabel>
            <Select
                name={label}
                multiple
                value={categoryData}
                onChange={handleChange}
                label={label}
                required
                renderValue={(selected) => selected.join(', ')}
                className={`${style} max-h-[56px]`}
            >
            <MenuItem value="all">
                <Checkbox 
                    checked={isAllSelected}
                    indeterminate={
                        categoryData?.length > 0 && categoryData?.length < category.length
                    }
                />
                <p>Select All</p>
            </MenuItem>
            {category.map((name) => (
                <MenuItem key={uuidv4()} value={name}>
                    <Checkbox checked={categoryData?.indexOf(name) > -1} />
                    <p>{name}</p>
                </MenuItem>
            ))}
            </Select>
        </FormControl>
    )
}