import usePreventAutoFocus from '@/hooks/use-prevent-auto-focus';
import { m } from '@/paraglide/messages';
import { formatters } from '@/utils/formatters';
import { EyeIcon } from '@phosphor-icons/react';
import { Badge } from '@ui/badge';
import { Button } from '@ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@ui/dialog';
import { Label } from '@ui/label';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@ui/table';
import { Tooltip, TooltipContent, TooltipTrigger } from '@ui/tooltip';
import TrueFalse from '@ui/true-false';
import AvatarUser, { AvatarUserType } from '../avatar/avatar-user';
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from '../ui/item';

type ActionProps = {
  data: BoxWithCount;
};

const ViewDetailBoxAction = ({ data }: ActionProps) => {
  const prevent = usePreventAutoFocus();

  return (
    <Dialog>
      <Tooltip>
        <TooltipTrigger asChild>
          <DialogTrigger asChild>
            <Button
              type="button"
              variant="ghost"
              size="icon"
              className="rounded-full cursor-pointer text-teal-500 hover:bg-teal-100 hover:text-teal-600"
            >
              <EyeIcon size={16} />
              <span className="sr-only">{m.ui_view_btn()}</span>
            </Button>
          </DialogTrigger>
        </TooltipTrigger>
        <TooltipContent className="bg-teal-500 [&_svg]:bg-teal-500 [&_svg]:fill-teal-500 text-white">
          <Label>{m.ui_view_btn()}</Label>
        </TooltipContent>
      </Tooltip>
      <DialogContent
        className="max-w-100 xl:max-w-2xl"
        {...prevent}
        onPointerDownOutside={(e) => e.preventDefault()}
      >
        <DialogHeader>
          <DialogTitle className="flex items-center gap-3 text-lg font-bold text-teal-600">
            <EyeIcon size={20} />
            {m.ui_dialog_view_title({ type: m.nav_boxes() })}
          </DialogTitle>
          <DialogDescription className="sr-only">
            {m.ui_dialog_view_title({ type: m.nav_boxes() })}
          </DialogDescription>
        </DialogHeader>
        <div className="overflow-hidden rounded-md border">
          <Table className="bg-white">
            <TableHeader>
              <TableRow>
                <TableHead className="w-2/5 text-white bg-primary">
                  {m.boxes_page_form_name()}
                </TableHead>
                <TableHead className="w-3/5 text-white bg-primary">
                  {data.name}
                </TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              <TableRow>
                <TableCell>{m.boxes_page_form_description()}</TableCell>
                <TableCell>{data.description}</TableCell>
              </TableRow>
              <TableRow>
                <TableCell>{m.boxes_page_form_color()}</TableCell>
                <TableCell>
                  <div
                    className="bg-(--box-color) w-10 h-4 border"
                    style={
                      {
                        '--box-color': data.color,
                      } as React.CSSProperties
                    }
                  ></div>
                </TableCell>
              </TableRow>
              {!!data.tags.length && (
                <TableRow>
                  <TableCell>{m.boxes_page_ui_table_header_tags()}</TableCell>
                  <TableCell className="flex">
                    {data.tags.map((tag) => (
                      <Badge
                        key={tag}
                        variant="outline"
                        className="flex items-center gap-1 bg-primary text-white"
                      >
                        {tag}
                      </Badge>
                    ))}
                  </TableCell>
                </TableRow>
              )}
              <TableRow>
                <TableCell>{m.boxes_page_ui_table_header_private()}</TableCell>
                <TableCell className="flex">
                  <TrueFalse value={data.isPrivate} />
                </TableCell>
              </TableRow>
              <TableRow>
                <TableCell>{m.boxes_page_ui_table_header_user()}</TableCell>
                <TableCell className="flex">
                  <Item className="p-0">
                    <ItemMedia>
                      <AvatarUser
                        className="h-8 w-8"
                        user={data.user as AvatarUserType}
                      />
                    </ItemMedia>
                    <ItemContent>
                      <ItemTitle>{data.user.name}</ItemTitle>
                      <ItemDescription>{data.user.email}</ItemDescription>
                    </ItemContent>
                  </Item>
                </TableCell>
              </TableRow>
              <TableRow>
                <TableCell>{m.boxes_page_ui_table_header_house()}</TableCell>
                <TableCell className="flex">
                  <div
                    className="text-(--house-color)"
                    style={
                      {
                        '--house-color': data.house?.color,
                      } as React.CSSProperties
                    }
                  >
                    {data.house?.name}
                  </div>
                </TableCell>
              </TableRow>
              <TableRow>
                <TableCell>{m.boxes_page_form_description()}</TableCell>
                <TableCell>
                  {formatters.dateTime(new Date(data.createdAt))}
                </TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </div>
      </DialogContent>
    </Dialog>
  );
};

export default ViewDetailBoxAction;
