import React from "react";

import WarningAmberOutlinedIcon from "@mui/icons-material/WarningAmberOutlined";
import { Box, Button, Stack, TableBody, ToggleButton, ToggleButtonGroup } from "@mui/material";

import ActionBar from "../../../../components/ActionBar";
import { Header } from "../../../../components/Header";
import { Page } from "../../../../components/Page";
import SearchBar from "../../../../components/SearchBar";
import { Table } from "../../../../components/Table";
import { TableCell } from "../../../../components/Table/TableCell";
import TableHead from "../../../../components/Table/TableHead";
import TableHeading from "../../../../components/Table/TableHeading";
import { NavigatingTableRow } from "../../../../components/Table/TableRow";
import TableCard from "../../../../components/TableCard";
import { TitleBar } from "../../../../components/TitleBar";
import Content, { ContentWrapperWithActionBar } from "../../../../containers/Content";
import { useI18n } from "../../../../contexts/I18nContext";
import { useRouter } from "../../../../contexts/RouterContext";
import { useUser } from "../../../../contexts/UserContext";
import { LimitOffset, PageComponent } from "../../../../types";
import { formatCustomerName } from "../../../../util/format_string";
import { hasPermission } from "../../../../util/has_permission";
import { CustomerType, MemberList } from "../../types/member";
import { CustomerTypeIcon } from "../../utils/customerTypeIcon";

type CustomerTypeFilter = CustomerType | "ALL";

const MemberListPage: PageComponent<LimitOffset<MemberList>> = ({ data }) => {
  const { t } = useI18n();
  const { navigate } = useRouter();
  const { user } = useUser();
  const defaultSearch = new URLSearchParams(window.location.search).get("search") ?? "";
  const defaultCustomerType = new URLSearchParams(window.location.search).get("customer_type");
  const [searchValue, setSearchValue] = React.useState(defaultSearch);
  const [customerTypeFilter, setCustomerTypeFilter] = React.useState<CustomerTypeFilter>(
    defaultCustomerType === CustomerType.PRIVATE || defaultCustomerType === CustomerType.COMPANY
      ? defaultCustomerType
      : "ALL",
  );
  const customerTypeFilterCount = customerTypeFilter === "ALL" ? undefined : 1;

  const navigateWithFilters = React.useCallback(
    (searchInput: string, customerType: CustomerTypeFilter) => {
      const query: Record<string, string> = {};

      if (searchInput !== "") {
        query.search = searchInput;
      }

      if (customerType !== "ALL") {
        query.customer_type = customerType;
      }

      navigate("member.member:list", {
        query,
        replace: true,
      });
    },
    [navigate],
  );

  const handleCustomerTypeChange = (
    _: React.MouseEvent<HTMLElement>,
    customerType: CustomerTypeFilter | null,
  ) => {
    if (customerType === null) return;

    setCustomerTypeFilter(customerType);
    navigateWithFilters(searchValue, customerType);
  };

  return (
    <Page>
      <Header>
        <TitleBar title={t("Members")}>
          <SearchBar
            defaultValue={defaultSearch}
            placeholder={t("Search members…")}
            onChange={(input) => setSearchValue(input)}
            onSubmit={(input) => {
              setSearchValue(input);
              navigateWithFilters(input, customerTypeFilter);
            }}
          />
        </TitleBar>
      </Header>

      <ContentWrapperWithActionBar>
        <Content layout="fullWidth">
          <TableCard>
            <Table pagination count={data?.results.length}>
              <TableHead>
                <TableHeading width={60}>{t("Number")}</TableHeading>
                <TableHeading>{t("Name")}</TableHeading>
                <TableHeading>{t("Phone")}</TableHeading>
                <TableHeading>{t("Email")}</TableHeading>
                <TableHeading>{t("Site")}</TableHeading>
                <TableHeading
                  popover={
                    <ToggleButtonGroup
                      exclusive
                      aria-label="Customer type filter"
                      color="primary"
                      size="small"
                      value={customerTypeFilter}
                      onChange={handleCustomerTypeChange}
                    >
                      <ToggleButton size="small" value="ALL">
                        {t("All")}
                      </ToggleButton>
                      <ToggleButton size="small" value={CustomerType.PRIVATE}>
                        {t("Private")}
                      </ToggleButton>
                      <ToggleButton size="small" value={CustomerType.COMPANY}>
                        {t("Company")}
                      </ToggleButton>
                    </ToggleButtonGroup>
                  }
                  popoverLabel={customerTypeFilterCount}
                >
                  {t("Type")}
                </TableHeading>
                <TableHeading width={60} />
              </TableHead>

              <TableBody>
                {data?.results.map((member) => (
                  <NavigatingTableRow
                    key={member.id}
                    route="member.member:detail"
                    routeParams={{ id: member.id }}
                  >
                    <TableCell>{member.number}</TableCell>
                    <TableCell>
                      <Stack alignItems="center" direction="row" spacing={1}>
                        {CustomerTypeIcon(member.customer_type)}
                        <Box component="span">{formatCustomerName(member)}</Box>
                      </Stack>
                    </TableCell>
                    <TableCell>{member.phone ?? "—"}</TableCell>
                    <TableCell>{member.email}</TableCell>
                    <TableCell>{member.site_code}</TableCell>
                    <TableCell>{member.customer_type}</TableCell>
                    <TableCell>
                      {!member.is_valid_customer ? (
                        <WarningAmberOutlinedIcon color="warning" fontSize="small" />
                      ) : null}
                    </TableCell>
                  </NavigatingTableRow>
                ))}
              </TableBody>
            </Table>
          </TableCard>
        </Content>

        {hasPermission(user, "member.add_member") && (
          <ActionBar>
            <Button
              color="primary"
              variant="contained"
              onClick={() => navigate("member.member:create")}
            >
              {t("Create member")}
            </Button>
          </ActionBar>
        )}
      </ContentWrapperWithActionBar>
    </Page>
  );
};

export default MemberListPage;