import React from "react";
import { Button, Typography, Box, Paper } from "@mui/material";
import { useDispatch } from "react-redux";
import { DRAWER } from "../../../../lib/redux/slices/appSlice";
import { ChangePasswordForm } from "../change-password-form/ChangePasswordForm";
import { SPACING } from "../../../../data/spacing";
import { motion } from "framer-motion";

const fadeInVariant = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
};

export const ChangePassword = () => {
  const dispatch = useDispatch();

  return (
    <Box
      display="flex"
      flexDirection="column"
      gap={SPACING.SMALL}
      sx={{ width: "100%" }}
    >
      <motion.div
        initial="hidden"
        animate="visible"
        variants={fadeInVariant}
        style={{ width: "100%" }}
      >
        <Paper
          elevation={3}
          sx={{ padding: 3, borderRadius: 3, marginBottom: 2 }}
        >
          <Box
            display="flex"
            justifyContent="space-between"
            alignItems="center"
            mb={2}
          >
            <Typography variant="h6" fontWeight="bold">
              تغییر رمز عبور
            </Typography>
            <Button
              variant="contained"
              size="small"
              onClick={() => {
                dispatch(
                  DRAWER({
                    right: !(window.innerWidth <= 600),
                    bottom: window.innerWidth <= 600,
                    title: "تغییر رمز عبور",
                    content: <ChangePasswordForm />,
                  })
                );
              }}
            >
              ویرایش
            </Button>
          </Box>
        </Paper>
      </motion.div>
    </Box>
  );
};
