import type { CoreBookingUnitGuest } from "@/lib/features/bookings/types";
import {
  Avatar,
  Badge,
  Divider,
  Drawer,
  Flex,
  Grid,
  Stack,
  Text,
  TextInput,
  Title,
  Tooltip,
} from "@mantine/core";
import { IconFileDescription, IconMaximize } from "@tabler/icons-react";
import moment from "moment";
import { Link } from "react-router";

const GuestDrawer: React.FC<{
  opened: boolean;
  close: () => void;
  selectedGuest: CoreBookingUnitGuest | null;
}> = ({ close, opened, selectedGuest }) => {
  const member = selectedGuest?.details;

  return (
    <Drawer
      opened={opened}
      onClose={close}
      title={
        <Text fz={20} fw={500}>
          Guest Details
        </Text>
      }
      position="right"
      size={"lg"}
    >
      <Stack
        pt={25}
        style={{
          borderTop: "1px solid var(--mantine-color-white-1)",
        }}
      >
        <Flex gap={24} direction={"column"}>
          <Flex justify={"space-between"} px={5}>
            <Flex align={"center"} gap={15}>
              <Avatar src={""} alt={member?.FirstName} w={50} h={50} />
              <Flex direction={"column"} gap={2}>
                <Flex align={"center"} gap={8}>
                  <Title fz={18} fw={"bold"}>
                    {member?.FirstName} {member?.LastName}
                  </Title>
                  <Divider orientation="vertical" h={26} my={"auto"} />
                  {member?.AccountID && (
                    <Badge
                      color="grey.11"
                      radius={4}
                      c={"dark"}
                      fz={12}
                      tt={"capitalize"}
                      size="lg"
                    >
                      {member?.Active ? "Active" : "Inactive"}
                    </Badge>
                  )}
                </Flex>
                <Flex gap={5}>
                  <Text fz={12} fw={500}>
                    {member?.AccountID}
                  </Text>
                  <Divider orientation="vertical" h={12} my={"auto"} />
                  <Text fz={12} fw={500}>
                    {member?.ContactID}
                  </Text>
                </Flex>
              </Flex>
            </Flex>
            {selectedGuest?.member_id && (
              <Tooltip label="More Details">
                <Link
                  to={`/admin/members/${member?.AccountID}/${member?.ContactID}`}
                  style={{ color: "black" }}
                >
                  <IconMaximize size={20} />
                </Link>
              </Tooltip>
            )}
          </Flex>
          <Divider w={"100%"} />
          <Flex direction={"column"} gap={28}>
            <Flex gap={4} align={"center"}>
              <IconFileDescription size={18} />
              <Text fz={14} fw={600}>
                Personal Information
              </Text>
            </Flex>
            <Grid gutter={"lg"}>
              <Grid.Col span={4}>
                <TextInput
                  fz={12}
                  labelProps={{ fz: 12, mb: 5 }}
                  label="Ownership Type"
                  radius={4}
                  disabled
                  value={member?.IsOwner ? "Legal Owner" : "Family Member"}
                />
              </Grid.Col>
              <Grid.Col span={4}>
                <TextInput
                  fz={12}
                  labelProps={{ fz: 12, mb: 5 }}
                  label="Email"
                  radius={4}
                  disabled
                  value={member?.Email}
                />
              </Grid.Col>
              <Grid.Col span={4}>
                <TextInput
                  fz={12}
                  labelProps={{ fz: 12, mb: 5 }}
                  label="Mobile"
                  radius={4}
                  disabled
                  value={member?.Mobile ?? member?.Phone ?? "NA"}
                />
              </Grid.Col>
              <Grid.Col span={4}>
                <TextInput
                  fz={12}
                  labelProps={{ fz: 12, mb: 5 }}
                  label="Date Of Birth"
                  radius={4}
                  disabled
                  value={moment(member?.DateOfBirth).format("MM/DD/YYYY")}
                />
              </Grid.Col>
              <Grid.Col span={4}>
                <TextInput
                  fz={12}
                  labelProps={{ fz: 12, mb: 5 }}
                  label="Nationality"
                  radius={4}
                  disabled
                  value={member?.Nationality ?? "NA"}
                />
              </Grid.Col>
              <Grid.Col span={4}>
                <TextInput
                  fz={12}
                  labelProps={{ fz: 12, mb: 5 }}
                  label="Address 1"
                  radius={4}
                  disabled
                  value={member?.AddressLine1 ?? "NA"}
                />
              </Grid.Col>
              <Grid.Col span={4}>
                <TextInput
                  fz={12}
                  labelProps={{ fz: 12, mb: 5 }}
                  label="Address 2"
                  radius={4}
                  disabled
                  value={member?.AddressLine2 ?? "NA"}
                />
              </Grid.Col>
              <Grid.Col span={4}>
                <TextInput
                  fz={12}
                  labelProps={{ fz: 12, mb: 5 }}
                  label="Country"
                  radius={4}
                  disabled
                  value={member?.AddrCountry ?? "NA"}
                />
              </Grid.Col>
              <Grid.Col span={4}>
                <TextInput
                  fz={12}
                  labelProps={{ fz: 12, mb: 5 }}
                  label="Town"
                  radius={4}
                  disabled
                  value={member?.AddressCity ?? "NA"}
                />
              </Grid.Col>
              <Grid.Col span={4}>
                <TextInput
                  fz={12}
                  labelProps={{ fz: 12, mb: 5 }}
                  label="State"
                  radius={4}
                  disabled
                  value={member?.AddressState ?? "NA"}
                />
              </Grid.Col>
              <Grid.Col span={4}>
                <TextInput
                  fz={12}
                  labelProps={{ fz: 12, mb: 5 }}
                  label="Pincode"
                  radius={4}
                  disabled
                  value={member?.Postcode ?? "NA"}
                />
              </Grid.Col>
            </Grid>
          </Flex>
        </Flex>
      </Stack>
    </Drawer>
  );
};

export default GuestDrawer;