import React, { useEffect, useState } from "react";
import {
  Card,
  CardContent,
  Typography,
  Button,
  Box,
  Tooltip,
} from "@mui/material";
import HelpIcon from "@mui/icons-material/Help";
import Link from "../../components/Link";
import PageLayout from "../../../Common/Layout/PageLayout";
import PageHeader from "../../../Common/PageHeader/PageHeader";
import Price from "../../components/Price";
import { useAccountMoneyInfo } from "./hooks";

import styles from "./index.module.css";

const Cost: React.FC = () => {
  const { data: info } = useAccountMoneyInfo();

  return (
    <>
      <PageHeader label="费用管理"></PageHeader>
      <PageLayout>
        <Card variant="outlined">
          <CardContent>
            <Typography variant="h6">
              <span>费用管理总览</span>
              <Link to="/saturn/cost/history" style={{ marginLeft: 10 }}>
                <Button>查看详细交易记录</Button>
              </Link>
            </Typography>
            <div className={styles.wrap}>
              <div className={styles.item}>
                <div className={styles.title}>
                  <span>余额</span>
                  <Tooltip
                    title="四舍五入，保留小数点后两位数字"
                    placement="right"
                  >
                    <HelpIcon className={styles.infoIcon} />
                  </Tooltip>
                </div>
                <div className={styles.content}>
                  <div className={styles.price}>
                    ￥<Price value={info.balance} />
                  </div>
                  <Box sx={{ "& button": { m: 1 } }}>
                    <Link to="/saturn/cost/recharge">
                      <Button variant="contained" color="primary" size="small">
                        充值
                      </Button>
                    </Link>
                    <Link to="/saturn/cost/withdrawal">
                      <Button variant="outlined" size="small">
                        提现
                      </Button>
                    </Link>
                  </Box>
                </div>
              </div>
              <div className={styles.item}>
                <div className={styles.title}>
                  <span>本月消费合计</span>
                  <Tooltip
                    title="四舍五入，保留小数点后两位数字"
                    placement="right"
                  >
                    <HelpIcon className={styles.infoIcon} />
                  </Tooltip>
                </div>
                <div className={styles.content}>
                  <div className={styles.price}>
                    ￥<Price value={info.monthly_bill_money} />
                  </div>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
        <br />
        <br />
        <Card variant="outlined">
          <CardContent>
            <Typography variant="h6">
              <span>说明</span>
            </Typography>
            <div className={styles.wrap}>
              土星云存储产品是以存储量作为产品的计费项。采用按量计费（后付费）的计费方式，每日生成账单，从账户余额中扣除。余额不足时，以短信、邮件以及控制台提示的方式提示用户续费。自欠费次日0时起，7日（自然日）内未续费，SCS服务将自动停服，数据无法访问，用户占用的存储空间资源仍将继续扣费，欠费累计，如果在15日（自然日）内充值补足欠款，服务自动启用；超过15日（自然日）未续费，自动清理数据，清理后数据不可恢复，在此期间用户占用资源仍将计费，欠费累计。
            </div>
          </CardContent>
        </Card>
      </PageLayout>
    </>
  );
};

export default Cost;
