import React, { memo, useCallback } from "react";

// power off icon
import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
import { Button } from "@mui/material";

import Card from "../../../../components/Card";
import CardContent from "../../../../components/Card/CardContent";
import CardHeader from "../../../../components/Card/CardHeader";
import { Header } from "../../../../components/Header";
import { TitleBar } from "../../../../components/TitleBar";
import Content from "../../../../containers/Content";
import { useI18n } from "../../../../contexts/I18nContext";
import { useUser } from "../../../../contexts/UserContext";
import { PageComponent } from "../../../../types";
import PasswordChangeForm from "../../components/PasswordChangeForm";

const MePage: PageComponent = () => {
  const { t } = useI18n();
  const { logout, user } = useUser();

  const handleLogout = useCallback(() => logout(), [logout]);

  return (
    <>
      <Header>
        <TitleBar title={user?.username ?? "Me"}>
          <Button
            color="error"
            size="large"
            startIcon={<PowerSettingsNewIcon />}
            variant="contained"
            onClick={handleLogout}
          >
            {t("Log out")}
          </Button>
        </TitleBar>
      </Header>

      <Content layout="fixedWidth">
        <Card sx={{ maxWidth: "fit-content" }}>
          <CardHeader sx={{ pb: 0 }} title={t("Change password")} />
          <CardContent>
            <PasswordChangeForm />
          </CardContent>
        </Card>
      </Content>
    </>
  );
};

export default memo(MePage);