import IconButton from "@mui/material/IconButton";
import DeleteIcon from "@mui/icons-material/Delete";
import { Grid2, ThemeProvider } from "@mui/material";
import style from "./ScheduleItemRow.module.css";
import turnosXpressTheme from "@core/app/theme/turnosXpress";
import Switch from "@mui/material/Switch";

export interface ScheduleItemRowProps {
    from: string;
    to: string;
    disabled: boolean;
    onDelete: (from: string) => void;
    onCheckChange: (from: string, data: boolean) => void;
}

export default function ScheduleItemRow(props: ScheduleItemRowProps): React.ReactElement {
    return (
        <>
            <Grid2 className={style.scheduleItemRow} container>
                <Grid2
                    size={3}
                    sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}
                >
                    {props.from}
                </Grid2>
                <Grid2 size={1}></Grid2>
                <Grid2
                    size={3}
                    sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}
                >
                    {props.to}
                </Grid2>

                <Grid2 size={1}></Grid2>
                <Grid2
                    size={4}
                    sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}
                >
                    <div>
                        <ThemeProvider theme={turnosXpressTheme}>
                            <Switch
                                checked={!props.disabled}
                                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                                    props.onCheckChange(props.from, !event.target.checked)
                                }}
                                size="medium"
                            />
                        </ThemeProvider>
                        <IconButton aria-label="delete" color="error">
                            <DeleteIcon onClick={() => props.onDelete(props.from)} />
                        </IconButton>
                    </div>
                </Grid2>
            </Grid2 >
        </>
    );
}


