import StyledForm from "@/core/components/StyledForm";
import CenterLayout from "@/layouts/CenterLayout";
import DashboardLayout from "@/layouts/DashboardLayout";
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 (
        <DashboardLayout>
            <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>
        </DashboardLayout>
    );
};

export default DashboardEditProfile;