zapishis-client/apps/web/components/orders/order-form/service-select.tsx

'use client';

import { DataNotFound } from '@/components/shared/alert';
import { ServiceCard } from '@/components/shared/service-card';
import { useServicesQuery } from '@/hooks/api/services';
import { useOrderStore } from '@/stores/order';
import { type ServiceFieldsFragment } from '@repo/graphql/types';
import { cn } from '@repo/ui/lib/utils';

export function ServiceSelect() {
  const masterId = useOrderStore((store) => store.masterId);

  const { data: { services } = {} } = useServicesQuery({
    filters: {
      active: {
        eq: true,
      },
      master: {
        documentId: {
          eq: masterId,
        },
      },
    },
  });

  if (!services?.length) return <DataNotFound title="Услуги не найдены" />;

  return (
    <div className="space-y-2 px-6">
      {services.map(
        (service) => service && <ServiceCardRadio key={service.documentId} {...service} />,
      )}
    </div>
  );
}

function ServiceCardRadio({ documentId, ...props }: Readonly<ServiceFieldsFragment>) {
  const serviceId = useOrderStore((store) => store.serviceId);
  const setServiceId = useOrderStore((store) => store.setServiceId);

  const selected = serviceId === documentId;

  function handleOnSelect() {
    setServiceId(documentId);
  }

  return (
    <label
      className={cn(
        'flex items-center justify-between rounded-2xl border-2 cursor-pointer',
        selected ? 'border-primary' : 'border-transparent',
      )}
    >
      <input
        checked={selected}
        className="hidden"
        name="service"
        onChange={() => handleOnSelect()}
        type="radio"
        value={documentId}
      />
      <ServiceCard {...props} />
    </label>
  );
}