import StyledForm from "@/core/components/StyledForm";
import CenterLayout from "@/layouts/CenterLayout";
import useUser from "@/lib/app/hooks/useUser";
import {Box, Container, Grid, Paper, Stack, TextField, Typography,} from "@mui/material";
import * as Yup from "yup";
import {Field, Formik} from "formik";
import {useTranslations} from "next-intl";
import AvatarUpload from "@/core/components/AvatarUpload";
import axios from "axios";
import {UPDATE_AVATAR} from "@/core/data/apiRoutes";
import useDirection from "@/lib/app/hooks/useDirection";
import Notifications from "@/core/components/notifications";
import ImageResizer from "@/core/components/ImageConvertor";

const DashboardEditProfile = () => {
    const t = useTranslations();
    const {user, token, getUser, changeUser} = useUser();
    const {directionApp} = useDirection();

    const editAvatar = async (avatar) => {
        Notifications(t);
        try {
            const formData = new FormData();

            if (avatar != null) {
                var resizedAvatar;
                resizedAvatar = await ImageResizer(avatar);
                formData.append("avatar", resizedAvatar);
            }

            await axios.post(UPDATE_AVATAR, formData, {
                headers: {
                    authorization: `Bearer ${token}`,
                    "Content-Type": "multipart/form-data",
                },
            });
        } catch (error) {
            Notifications(t, error.response);
            throw error;
        }
    };
    const handleSubmit = (values, {setSubmitting}) => {

    };
    const initialValues = {
        expert_avatar: null,
        username: user.username,
        name: user.name,
        email: user.email,
        province_name: user.province_name,
        position: user.position,
    };
    const validationSchema = Yup.object().shape({});

    return (
        <CenterLayout>
            <Container maxWidth="sm">
                <Formik
                    initialValues={initialValues}
                    onSubmit={handleSubmit}
                    validationSchema={validationSchema}
                >
                    {(props) => (
                        <StyledForm
                            onSubmit={(e) => {
                                e.preventDefault();
                                props.handleSubmit();
                            }}
                        >
                            <Paper elevation={0}>
                                <Stack spacing={3} sx={{p: 5}} component="div">
                                    <Typography margin={2} variant="h4" textAlign="center">
                                        {t("UpdateProfile.typography_edit_profile")}
                                    </Typography>
                                    <Box
                                        sx={{
                                            display: "flex",
                                            flexDirection: "column",
                                            alignItems: "center",
                                            justifyContent: "center",
                                        }}
                                    >
                                        <AvatarUpload
                                            user={user}
                                            setFieldValue={props.setFieldValue}
                                            valueAvatar="expert_avatar"
                                            changeFlag="change_avatar"
                                        />
                                    </Box>
                                    <Grid container spacing={2} sx={{pb: 2}}>
                                        <Grid item xs={12} sm={6}>
                                            <Field
                                                as={TextField}
                                                name="username"
                                                label={t("UpdateProfile.text_field_username")}
                                                variant="outlined"
                                                margin="normal"
                                                size="small"
                                                disabled={true}
                                                error={
                                                    props.touched.username && props.errors.username
                                                        ? true
                                                        : false
                                                }
                                                helperText={
                                                    props.touched.username
                                                        ? props.errors.username
                                                        : null
                                                }
                                                sx={{
                                                    width: "100%",
                                                }}
                                            />
                                        </Grid>
                                        <Grid item xs={12} sm={6}>
                                            <Field
                                                as={TextField}
                                                name="name"
                                                label={t("UpdateProfile.text_field_name")}
                                                variant="outlined"
                                                margin="normal"
                                                size="small"
                                                disabled={true}
                                                error={
                                                    props.touched.name && props.errors.name
                                                        ? true
                                                        : false
                                                }
                                                helperText={
                                                    props.touched.name ? props.errors.name : null
                                                }
                                                sx={{
                                                    width: "100%",
                                                }}
                                            />
                                        </Grid>
                                        <Grid item xs={12} sm={6}>
                                            <Field
                                                as={TextField}
                                                name="email"
                                                label={t("UpdateProfile.text_field_email")}
                                                variant="outlined"
                                                margin="normal"
                                                size="small"
                                                disabled={true}
                                                error={
                                                    props.touched.email && props.errors.email
                                                        ? true
                                                        : false
                                                }
                                                helperText={
                                                    props.touched.email ? props.errors.email : null
                                                }
                                                sx={{
                                                    width: "100%",
                                                }}
                                            />
                                        </Grid>

                                        <Grid item xs={12} sm={6}>
                                            <Field
                                                as={TextField}
                                                name="province_name"
                                                label={t("UpdateProfile.text_field_province_name")}
                                                variant="outlined"
                                                margin="normal"
                                                size="small"
                                                disabled={true}
                                                error={
                                                    props.touched.province_name &&
                                                    props.errors.province_name
                                                        ? true
                                                        : false
                                                }
                                                helperText={
                                                    props.touched.province_name
                                                        ? props.errors.province_name
                                                        : null
                                                }
                                                sx={{
                                                    width: "100%",
                                                }}
                                            />
                                        </Grid>
                                        <Grid item xs={12} sm={6}>
                                            <Field
                                                as={TextField}
                                                name="position"
                                                label={t("UpdateProfile.text_field_position")}
                                                variant="outlined"
                                                margin="normal"
                                                size="small"
                                                disabled={true}
                                                error={
                                                    props.touched.position && props.errors.position
                                                        ? true
                                                        : false
                                                }
                                                helperText={
                                                    props.touched.position
                                                        ? props.errors.position
                                                        : null
                                                }
                                                sx={{
                                                    width: "100%",
                                                }}
                                            />
                                        </Grid>
                                    </Grid>
                                </Stack>
                            </Paper>
                        </StyledForm>
                    )}
                </Formik>
            </Container>
        </CenterLayout>
    );
};

export default DashboardEditProfile;
