import { useContext, useEffect, type ReactElement } from 'react';
import { useParams } from 'react-router-dom';
import { useQuery } from 'urql';
import { BusinessTripScreenDocument } from '../../gql/graphql.js';
import { FiltersContext } from '../../providers/filters-context.js';
import { AccounterLoader, PrintToPdfButton } from '../common/index.js';
import { PageLayout } from '../layout/page-layout.js';
import { EditableBusinessTrip } from './editable-business-trip.js';

// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
/* GraphQL */ `
  query BusinessTripScreen($businessTripId: UUID!) {
    businessTrip(id: $businessTripId) {
      id
      name
      dates {
        start
      }
    }
  }
`;

type Props = {
  businessTripId?: string;
};

export const BusinessTrip = ({ businessTripId }: Props): ReactElement => {
  const { businessTripId: businessTripIdFromUrl } = useParams<{ businessTripId: string }>();
  const { setFiltersContext } = useContext(FiltersContext);
  const id = businessTripId ?? businessTripIdFromUrl ?? '';
  const [{ data, fetching }] = useQuery({
    query: BusinessTripScreenDocument,
    variables: {
      businessTripId: id,
    },
  });

  useEffect(() => {
    setFiltersContext(
      <div className="flex flex-row gap-x-5">
        <PrintToPdfButton filename="business_trip_report" />
      </div>,
    );
  }, [data, fetching, setFiltersContext]);

  return fetching || !data?.businessTrip ? (
    <AccounterLoader />
  ) : (
    <PageLayout
      title={`Business Trip: ${data.businessTrip.name}`}
      description="Manage business trip"
    >
      <div>{id && <EditableBusinessTrip tripId={id} isExtended />}</div>
    </PageLayout>
  );
};