import { Box, Button, Paper, Stack, Typography } from "@mui/material";
import useAuth from "hooks/useAuth";
import useDashboard from "hooks/useDashBoard";
import useNavigateCustom from "hooks/useNavigateCustom";
import { PageID, TabID } from "pages";
import { useEffect } from "react";
import { getPath } from "routes/path";

export default function UserDetail() {
  const { setHeaderTitle, setTabs } = useDashboard(
    PageID.DASHBOARD_USER_DETAIL,
    TabID.NONE
  );

  const { navigateWhenChanged } = useNavigateCustom();

  const { user } = useAuth();

  useEffect(() => {
    setHeaderTitle("利用者情報");
    setTabs(null);
  }, []);

  return (
    <Paper sx={{ p: 2 }}>
      <Typography variant="h5">各種申請</Typography>
      <Stack spacing={2} mt={2}>
        <Box>
          <Button
            variant="contained"
            onClick={() => {
              navigateWhenChanged(
                getPath(PageID.DASHBOARD_USER_UPDATE_USER_INFO)
              );
            }}
          >
            ユーザー情報変更
          </Button>
        </Box>
        <Box>
          <Button
            variant="contained"
            onClick={() => {
              navigateWhenChanged(
                getPath(PageID.DASHBOARD_USER_CHANGE_EMAIL_START)
              );
            }}
          >
            Email変更
          </Button>
        </Box>
        <Box>
          <Button
            variant="contained"
            onClick={() => {
              navigateWhenChanged(getPath(PageID.DASHBOARD_USER_BANK_REGISTER));
            }}
          >
            口座情報変更
          </Button>
        </Box>
        {user?.can_apply_to_change_payment_method_creditcard && (
          <Box>
            <Button
              variant="contained"
              onClick={() => {
                navigateWhenChanged(
                  getPath(
                    PageID.DASHBOARD_USER_CHANGE_PAYMENT_METHOD_CREDITCARD_ORDER
                  )
                );
              }}
            >
              クレジットカード登録
            </Button>
          </Box>
        )}
      </Stack>
    </Paper>
  );
}