import React from "react";

import PlaylistAddCheckCircleIcon from "@mui/icons-material/PlaylistAddCheckCircle";
import WarningAmberOutlinedIcon from "@mui/icons-material/WarningAmberOutlined";
import { Stack, Typography } from "@mui/material";

import { DateTime } from "luxon";

import Card from "../../../components/Card";
import CardActions from "../../../components/Card/CardActions";
import CardCancelButton from "../../../components/Card/CardCancelButton";
import CardContent from "../../../components/Card/CardContent";
import CardFieldText from "../../../components/Card/CardFieldText";
import CardHeader from "../../../components/Card/CardHeader";
import CardRow from "../../../components/Card/CardRow";
import CardSaveButton from "../../../components/Card/CardSaveButton";
import { useI18n } from "../../../contexts/I18nContext";
import { MemberDetail } from "../types/member";

export interface MemberCardProps {
  member?: MemberDetail;
}

export const MemberMetaCard: React.FC<MemberCardProps> = (props) => {
  const { t } = useI18n();

  const member = props.member ?? {
    number: "",
    customer_type: "",
    site_code: "",
    origin: "",
    locale: "",
    date_created: "",
    billing_address: {},
    is_valid_customer: true,
  };

  return (
    <>
      <Card isCompact={true} isEditable={false}>
        <CardHeader title={t("Member Meta")} />

        <CardContent>
          <CardRow>
            <Stack alignItems="center" direction="row" spacing={1} sx={{ mb: 1 }}>
              {member.is_valid_customer ? (
                <>
                  <PlaylistAddCheckCircleIcon color="success" />
                  <Typography color="success.main" variant="body2">
                    {t("Valid Customer")}
                  </Typography>
                </>
              ) : (
                <>
                  <WarningAmberOutlinedIcon color="warning" />
                  <Typography color="warning.main" variant="body2">
                    {t("Customer details missing")}
                  </Typography>
                </>
              )}
            </Stack>
          </CardRow>
          <CardRow>
            <CardFieldText
              formName="number"
              label={t("Membership Number")}
              required={true}
              value={String(member.number)}
            />
          </CardRow>
          <CardRow>
            <CardFieldText
              formName="customer_type"
              label={t("Customer Type")}
              required={true}
              value={member.customer_type}
            />
          </CardRow>
          <CardRow>
            <CardFieldText
              formName="site"
              label={t("Site")}
              required={true}
              value={member.site_code}
            />
          </CardRow>
          <CardRow>
            <CardFieldText
              formName="language"
              label={t("Language")}
              required={true}
              value={member.locale}
            />
          </CardRow>
          <CardRow>
            <CardFieldText
              formName="origin"
              label={t("Origin")}
              required={true}
              value={member.origin}
            />
          </CardRow>
          <CardRow>
            <CardFieldText
              formName="date_created"
              label={t("Date Created")}
              required={true}
              value={DateTime.fromISO(member.date_created as string).toISODate() ?? undefined}
            />
          </CardRow>
        </CardContent>
        <CardActions>
          <CardCancelButton />
          <CardSaveButton />
        </CardActions>
      </Card>
    </>
  );
};

export default MemberMetaCard;