import { type PropsWithChildren } from "react";
import { useBoolean } from "usehooks-ts";

import { Button } from "@/components/ui/button/button";
import Card from "@/components/ui/card/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { useUserDepartmentQuery } from "@/services/eva-display/user-department/user-department.service";

import {
  CustomerInfoSelectProvider,
  useCustomerInfoSelectCtx,
} from "./customer-info-select.context";

interface CustomerInfoSelectProps {
  children: (variables: {
    showUserSelect: () => void;
    isShowUserSelect: boolean;
  }) => React.ReactNode;
  onChange: (value: string) => void;
  value: string | null;
  defaultOpen?: boolean;
}

export const CustomerInfoSelect = (props: CustomerInfoSelectProps) => {
  const dropdownBoolean = useBoolean(props.defaultOpen ?? false);
  return (
    <CustomerInfoSelectProvider
      isShowDropdown={dropdownBoolean.value}
      setShowDropdown={dropdownBoolean.setValue}
      onChange={props.onChange}
      value={props.value}
    >
      <div>
        {props.children({
          showUserSelect: dropdownBoolean.setTrue,
          isShowUserSelect: dropdownBoolean.value,
        })}
      </div>
    </CustomerInfoSelectProvider>
  );
};

export const CustomerInfoSelectInfoBox = (props: PropsWithChildren) => {
  const { isShowDropdown } = useCustomerInfoSelectCtx();
  if (isShowDropdown) return null;
  return (
    <Card className="border border-gray-200 bg-gray-50">
      <div className="flex flex-wrap justify-between gap-2">
        {props.children}
      </div>
    </Card>
  );
};

interface CustomerInfoSelectInfoBoxPropertyProps {
  title: string;
  value: string;
}

export const CustomerInfoSelectInfoBoxProperty = (
  props: CustomerInfoSelectInfoBoxPropertyProps,
) => {
  return (
    <div className="flex-1 basis-1/3 text-sm md:basis-0">
      <div className="text-gray-500">{props.title}</div>
      <div>{props.value}</div>
    </div>
  );
};

interface CustomerInfoSelectDropdownProps {}

export const CustomerInfoSelectDropdown = (
  _props: CustomerInfoSelectDropdownProps,
) => {
  const userDepartmentQuery = useUserDepartmentQuery();

  const { isShowDropdown, setShowDropdown, onChange, value } =
    useCustomerInfoSelectCtx();
  if (!isShowDropdown) return null;

  return (
    <div className="flex min-h-[74px] items-stretch gap-4">
      <Select
        onValueChange={(newValue) => {
          onChange(newValue);
        }}
        defaultValue={value ?? undefined}
      >
        <SelectTrigger className="h-[50px] max-w-[250px]">
          <SelectValue placeholder="Çalışan Seç" />
        </SelectTrigger>
        <SelectContent className="scroll-bar max-h-[280px] overflow-y-scroll">
          {userDepartmentQuery.data?.map((userItem) => (
            <SelectItem key={userItem.value} value={userItem.value}>
              {userItem.name}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      <Button
        type="button"
        variant="primary"
        size="xl"
        className="max-h-full min-h-full min-w-[100px]"
        onClick={() => setShowDropdown(false)}
      >
        Seç
      </Button>
    </div>
  );
};