import { Badge } from "@/components/ui/badge/badge";
import { Button } from "@/components/ui/button/button";
import MaskedInput from "@/components/ui/masked-input/masked-input";
import { Skeleton } from "@/components/ui/skeleton/skeleton";
import { useUserDepartmentQuery } from "@/services/eva-display/user-department/user-department.service";

import {
  CustomerInfoSelect,
  CustomerInfoSelectDropdown,
  CustomerInfoSelectInfoBox,
  CustomerInfoSelectInfoBoxProperty,
} from "./customer-info-select";

interface CustomerInfoSelectInputProps {
  value: string | null;
  onChange: (value: string) => void;
  onMilesChange?: (value: string) => void;
  showMilesCodeInput?: boolean;
  label: string;
}

const CustomerInfoSelectInput = (props: CustomerInfoSelectInputProps) => {
  const userDepartmentQuery = useUserDepartmentQuery();

  const userItem = userDepartmentQuery.data?.find(
    (_userItem) => _userItem.value === props.value,
  );

  if (userDepartmentQuery.isLoading) return <Skeleton className="h-[74px]" />;

  return (
    <CustomerInfoSelect {...props} defaultOpen={!userItem}>
      {({ showUserSelect, isShowUserSelect }) => (
        <>
          <div className="mb-1 flex justify-between">
            <div className="flex items-center gap-3">
              <h3 className="text-xs font-semibold">{props.label}</h3>
              <Badge variant="default" className="text-xs">
                Kurum Çalışanı
              </Badge>
            </div>
            <Button
              size="sm"
              variant="primary-text"
              onClick={showUserSelect}
              type="button"
            >
              Değiştir
            </Button>
          </div>
          <CustomerInfoSelectInfoBox>
            <CustomerInfoSelectInfoBoxProperty
              title="Ad Soyad"
              value={userItem?.name ?? ""}
            />
            <CustomerInfoSelectInfoBoxProperty
              title="E-Posta Adresi"
              value={userItem?.properties.email ?? ""}
            />
            <CustomerInfoSelectInfoBoxProperty
              title="Telefon Numarası"
              value={userItem?.properties.phoneNumber ?? ""}
            />
          </CustomerInfoSelectInfoBox>
          {props.showMilesCodeInput && !isShowUserSelect && (
            <div className="mt-2">
              <MaskedInput
                defaultValue={userItem?.properties.milesCode}
                size="lg"
                placeholder="Miles & Smiles Numarası"
                mask="miles"
                onChangeUnMasked={(_value) => props.onMilesChange?.(_value)}
              />
            </div>
          )}

          <CustomerInfoSelectDropdown />
        </>
      )}
    </CustomerInfoSelect>
  );
};

export default CustomerInfoSelectInput;