import {
    Combobox,
    ComboboxButton,
    ComboboxInput,
    ComboboxOption,
    ComboboxOptions,
} from "@headlessui/react";
import sourceConfigsData from "@site/src/data/source-configs-dereferenced.json";
import styles from "./SourceConfiguration.module.css";
import { useState, useMemo } from "react";


/**
 * Component to display configuration fields based on selected source type
 * Uses OpenAPI plugin classnames for perfect visual consistency
 */
const ConfigurationFields = ({
  selectedSourceId,
  configSchema,
}: {
  selectedSourceId: string;
  configSchema: any;
}) => {
  const selectedConfig = configSchema.oneOf?.find(
    (config) => config.title === selectedSourceId,
  );

  if (!selectedConfig) {
    return null;
  }

  const requiredFields = selectedConfig.required || [];
  const properties = selectedConfig.properties || {};

  return (
    <ul style={{ marginLeft: "1rem", listStyle: "none", padding: 0 }}>
      <div className="openapi-schema__list-item">
        <div>
          <span className="openapi-schema__container">
            <strong className="openapi-schema__property">properties</strong>
            <span className="openapi-schema__name">object</span>
          </span>
        </div>
      </div>

      {Object.entries(properties).map(([fieldName, fieldSchema]) => (
        <div key={fieldName} className="openapi-schema__list-item">
          <div>
            <span className="openapi-schema__container">
              <strong className="openapi-schema__property">{fieldName}</strong>
              <span className="openapi-schema__name">
                {fieldSchema.title || fieldSchema.type}
              </span>
              {requiredFields.includes(fieldName) && (
                <span className="openapi-schema__required">required</span>
              )}
            </span>
          </div>
          {fieldSchema.description && <p>{fieldSchema.description}</p>}
        </div>
      ))}
    </ul>
  );
};

export const SourceConfiguration = ({ endpointData }) => {
  const [sourceConfigs] = useState(sourceConfigsData);
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedSource, setSelectedSource] = useState(
    sourceConfigsData.length > 0 ? sourceConfigsData[0] : null,
  );
  const [bodyExpanded, setBodyExpanded] = useState(true);
  const [configExpanded, setConfigExpanded] = useState(true);
  const [fieldValues, setFieldValues] = useState({});

  // Filter sources based on search query
  const filteredSources = useMemo(() => {
    if (!searchQuery.trim()) {
      return sourceConfigs;
    }
    const query = searchQuery.toLowerCase();
    return sourceConfigs.filter(
      (source) =>
        source.displayName.toLowerCase().includes(query) ||
        source.id.toLowerCase().includes(query),
    );
  }, [searchQuery, sourceConfigs]);

  const handleSourceSelect = (source) => {
    console.log("Selected source:", source);
    setSelectedSource(source);
  };
  return (
    <>
      <Combobox
        immediate
        value={selectedSource}
        onChange={handleSourceSelect}
        onClose={() => setSearchQuery("")}
      >
        <div className={styles.comboboxWrapper}>
          <ComboboxInput
            id="source-combobox"
            className={styles.input}
            placeholder="Search sources..."
            displayValue={(source) => source?.id ?? ""}
            onChange={(event) => setSearchQuery(event.target.value)}
            autoComplete="off"
          />
          <ComboboxButton className={styles.dropdownButton}>
            <svg
              viewBox="0 0 20 20"
              fill="currentColor"
              data-slot="icon"
              aria-hidden="true"
              className="ugz uig"
            >
              <path
                d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
                clipRule="evenodd"
                fillRule="evenodd"
              ></path>
            </svg>
          </ComboboxButton>
        </div>

        <ComboboxOptions className={styles.dropdown} anchor="bottom">
          {filteredSources.length === 0 ? (
            <div className={styles.noResults}>
              {searchQuery
                ? `No sources found for "${searchQuery}"`
                : "No sources available"}
            </div>
          ) : (
            filteredSources.map((source) => (
              <ComboboxOption
                key={source.id}
                value={source}
                className={({ active, selected }) =>
                  `${styles.option} ${active ? styles.active : ""} ${
                    selected ? styles.selected : ""
                  }`
                }
              >
                <span className={styles.optionId}>{source.id}</span>
              </ComboboxOption>
            ))
          )}
        </ComboboxOptions>
      </Combobox>
      {endpointData?.configurationSchema && (
        <div style={{ marginTop: "1rem" }}>
          {endpointData.configurationSchema.description && (
            <p
              style={{
                fontSize: "0.9rem",
                lineHeight: "1.4",
                marginBottom: "0.5rem",
                margin: "0 0 0.5rem 0",
              }}
            >
              {endpointData.configurationSchema.description}
            </p>
          )}

          {/* Show oneOf badge if configuration has multiple options */}
          {endpointData.configurationSchema.oneOf && (
            <div
              style={{
                display: "flex",
                alignItems: "center",
                gap: "0.75rem",
                marginBottom: "0.75rem",
                flexWrap: "wrap",
              }}
            >
              <span className="badge badge--info" style={{ marginBottom: 0 }}>
                oneOf
              </span>
          
            </div>
          )}

          {/* Display required properties for selected source */}
          {selectedSource && endpointData.configurationSchema.oneOf && (
            <ConfigurationFields
              selectedSourceId={selectedSource.id}
              configSchema={endpointData.configurationSchema}
            />
          )}
        </div>
      )}
    </>
  );
};
