/// <reference types="../index.d.ts" />
import type { ArcgisCkeditor5 } from "../components/arcgis-ckeditor5/customElement.js";
import type { ArcgisCkeditor5Popover } from "../components/arcgis-ckeditor5-popover/customElement.js";
import type { ArcgisColorInput } from "../components/arcgis-color-input/customElement.js";
import type { ArcgisFieldInfo } from "../components/arcgis-field-info/customElement.js";
import type { ArcgisFieldPickList } from "../components/arcgis-field-pick-list/customElement.js";
import type { ArcgisHistogram } from "../components/arcgis-histogram/customElement.js";
import type { ArcgisLabelInput } from "../components/arcgis-label-input/customElement.js";
import type { ArcgisPickerInput } from "../components/arcgis-picker-input/customElement.js";
import type { ArcgisRampColor } from "../components/arcgis-ramp-color/customElement.js";
import type { ArcgisRampColorBreak } from "../components/arcgis-ramp-color-break/customElement.js";
import type { ArcgisRampOpacity } from "../components/arcgis-ramp-opacity/customElement.js";
import type { ArcgisSlider } from "../components/arcgis-slider/customElement.js";
import type { ArcgisSliderInput } from "../components/arcgis-slider-input/customElement.js";
import type { ArcgisTicks } from "../components/arcgis-ticks/customElement.js";
import type { ArcgisUniqueValuesList } from "../components/arcgis-unique-values-list/customElement.js";
import type { HTMLProps } from 'react';
import type { EventHandler } from "@arcgis/lumina"; 

interface ReactArcgisCkeditor5 extends Partial<Pick<ArcgisCkeditor5, 'canResizeVertically' | 'currentLanguage' | 'customConfig' | 'customExpressionCheck' | 'editorType' | 'groupFieldsAndExpressions' | 'intlExpressionsGroupHeading' | 'intlFieldsGroupHeading' | 'intlTextPlaceHolder' | 'mentionFields' | 'readOnly' | 'textData'>>, HTMLProps<HTMLArcgisCkeditor5Element> {
  onarcgisCkeditor5Created?: EventHandler<HTMLArcgisCkeditor5Element["arcgisCkeditor5Created"]>;
  onarcgisCkeditor5DataUpdated?: EventHandler<HTMLArcgisCkeditor5Element["arcgisCkeditor5DataUpdated"]>;
  onarcgisCkeditor5SourceEditingChanged?: EventHandler<HTMLArcgisCkeditor5Element["arcgisCkeditor5SourceEditingChanged"]>;
  onarcgisCreated?: EventHandler<HTMLArcgisCkeditor5Element["arcgisCreated"]>;
  onarcgisDataUpdated?: EventHandler<HTMLArcgisCkeditor5Element["arcgisDataUpdated"]>;
  onarcgisSourceEditingChanged?: EventHandler<HTMLArcgisCkeditor5Element["arcgisSourceEditingChanged"]>;
}

interface ReactArcgisCkeditor5Popover extends Partial<Pick<ArcgisCkeditor5Popover, 'guid' | 'intlCancel' | 'intlLabel' | 'intlOk' | 'refElement'>>, HTMLProps<HTMLArcgisCkeditor5PopoverElement> {
  onarcgisCkeditor5PopoverClosed?: EventHandler<HTMLArcgisCkeditor5PopoverElement["arcgisCkeditor5PopoverClosed"]>;
  onarcgisPopoverClosed?: EventHandler<HTMLArcgisCkeditor5PopoverElement["arcgisPopoverClosed"]>;
}

interface ReactArcgisColorInput extends Partial<Pick<ArcgisColorInput, 'clearable' | 'color' | 'compact' | 'disabled' | 'hideRecentColors' | 'messageOverrides' | 'placement' | 'popoverProps' | 'showTransparency' | 'storageId'>>, HTMLProps<HTMLArcgisColorInputElement> {
  onarcgisChange?: EventHandler<HTMLArcgisColorInputElement["arcgisChange"]>;
  onarcgisColorInputChange?: EventHandler<HTMLArcgisColorInputElement["arcgisColorInputChange"]>;
  onarcgisColorInputPopoverClose?: EventHandler<HTMLArcgisColorInputElement["arcgisColorInputPopoverClose"]>;
  onarcgisColorInputPopoverOpen?: EventHandler<HTMLArcgisColorInputElement["arcgisColorInputPopoverOpen"]>;
  onarcgisColorInputSwatchUpdate?: EventHandler<HTMLArcgisColorInputElement["arcgisColorInputSwatchUpdate"]>;
  onarcgisPickerClose?: EventHandler<HTMLArcgisColorInputElement["arcgisPickerClose"]>;
  onarcgisPickerOpen?: EventHandler<HTMLArcgisColorInputElement["arcgisPickerOpen"]>;
  onarcgisSwatchUpdate?: EventHandler<HTMLArcgisColorInputElement["arcgisSwatchUpdate"]>;
}

interface ReactArcgisFieldInfo extends Partial<Pick<ArcgisFieldInfo, 'fieldName' | 'hideAlias' | 'hideNumericFormat' | 'hideStatistics' | 'layer' | 'view'>>, HTMLProps<HTMLArcgisFieldInfoElement> {
  onarcgisComplete?: EventHandler<HTMLArcgisFieldInfoElement["arcgisComplete"]>;
  onarcgisFieldInfoComplete?: EventHandler<HTMLArcgisFieldInfoElement["arcgisFieldInfoComplete"]>;
}

interface ReactArcgisFieldPickList extends Partial<Pick<ArcgisFieldPickList, 'customExpressionCheck' | 'expressionsGroupHeading' | 'fields' | 'fieldsGroupHeading' | 'filterNoResultsText' | 'filterPlaceholderText' | 'groupFieldsAndExpressions' | 'heading' | 'hideCancel' | 'hideSort' | 'layer' | 'listOnly' | 'mapView' | 'multiple' | 'okBtnText' | 'popoverProps' | 'selectedFields' | 'showCancel' | 'showDescription' | 'showFieldInfo' | 'showFieldName' | 'showFieldTypeIcon' | 'showFilterLength' | 'showSelectionAll' | 'showSort' | 'sortBy' | 'view'>>, HTMLProps<HTMLArcgisFieldPickListElement> {
  onarcgisChange?: EventHandler<HTMLArcgisFieldPickListElement["arcgisChange"]>;
  onarcgisClose?: EventHandler<HTMLArcgisFieldPickListElement["arcgisClose"]>;
  onarcgisDeleteField?: EventHandler<HTMLArcgisFieldPickListElement["arcgisDeleteField"]>;
  onarcgisEditField?: EventHandler<HTMLArcgisFieldPickListElement["arcgisEditField"]>;
  onarcgisFieldPickListChange?: EventHandler<HTMLArcgisFieldPickListElement["arcgisFieldPickListChange"]>;
  onarcgisFieldPickListDismissed?: EventHandler<HTMLArcgisFieldPickListElement["arcgisFieldPickListDismissed"]>;
  onarcgisFieldPickListSortByChange?: EventHandler<HTMLArcgisFieldPickListElement["arcgisFieldPickListSortByChange"]>;
  onarcgisSortByChange?: EventHandler<HTMLArcgisFieldPickListElement["arcgisSortByChange"]>;
}

interface ReactArcgisHistogram extends Partial<Pick<ArcgisHistogram, 'average' | 'bins' | 'colorBlendingEnabled' | 'colorStops' | 'dataLines' | 'icon' | 'label' | 'labelFormatFunction' | 'layout' | 'max' | 'messageOverrides' | 'min' | 'standardDeviation'>>, HTMLProps<HTMLArcgisHistogramElement> {
}

interface ReactArcgisLabelInput extends Partial<Pick<ArcgisLabelInput, 'alignment' | 'labelFormatter' | 'readOnly' | 'value'>>, HTMLProps<HTMLArcgisLabelInputElement> {
  onarcgisChange?: EventHandler<HTMLArcgisLabelInputElement["arcgisChange"]>;
}

interface ReactArcgisPickerInput extends Partial<Pick<ArcgisPickerInput, 'disabled' | 'heading' | 'iconEnd' | 'intlDone' | 'label' | 'popoverProps'>>, HTMLProps<HTMLArcgisPickerInputElement> {
  onarcgisPopoverClose?: EventHandler<HTMLArcgisPickerInputElement["arcgisPopoverClose"]>;
  onarcgisPopoverOpen?: EventHandler<HTMLArcgisPickerInputElement["arcgisPopoverOpen"]>;
}

interface ReactArcgisRampColor extends Partial<Pick<ArcgisRampColor, 'layout' | 'max' | 'min' | 'stops'>>, HTMLProps<HTMLArcgisRampColorElement> {
}

interface ReactArcgisRampColorBreak extends Partial<Pick<ArcgisRampColorBreak, 'layout' | 'max' | 'min' | 'stops'>>, HTMLProps<HTMLArcgisRampColorBreakElement> {
}

interface ReactArcgisRampOpacity extends Partial<Pick<ArcgisRampOpacity, 'fillColor' | 'layout' | 'max' | 'min' | 'stops'>>, HTMLProps<HTMLArcgisRampOpacityElement> {
}

interface ReactArcgisSlider extends Partial<Pick<ArcgisSlider, 'allowValuesOverlap' | 'autoDestroyDisabled' | 'disabled' | 'fillPlacement' | 'fullRangeMax' | 'fullRangeMin' | 'labelFormatter' | 'layout' | 'max' | 'messageOverrides' | 'min' | 'mirrored' | 'popoverLabel' | 'popoverPlacement' | 'precision' | 'rangeLabelsEditingEnabled' | 'rangeLabelsPlacement' | 'segmentsDraggingDisabled' | 'showRangeLabels' | 'steps' | 'valueLabelsDisplay' | 'valueLabelsEditingEnabled' | 'valueLabelsPlacement' | 'values'>>, HTMLProps<HTMLArcgisSliderElement> {
  onarcgisActiveValueChange?: EventHandler<HTMLArcgisSliderElement["arcgisActiveValueChange"]>;
  onarcgisChange?: EventHandler<HTMLArcgisSliderElement["arcgisChange"]>;
  onarcgisInput?: EventHandler<HTMLArcgisSliderElement["arcgisInput"]>;
  onarcgisRangeChange?: EventHandler<HTMLArcgisSliderElement["arcgisRangeChange"]>;
}

interface ReactArcgisSliderInput extends Partial<Pick<ArcgisSliderInput, 'disabled' | 'flipLabels' | 'label' | 'max' | 'min' | 'step' | 'unitsLabel' | 'value' | 'withSteppers'>>, HTMLProps<HTMLArcgisSliderInputElement> {
  onarcgisSliderInputValueChange?: EventHandler<HTMLArcgisSliderInputElement["arcgisSliderInputValueChange"]>;
  onarcgisValueChange?: EventHandler<HTMLArcgisSliderInputElement["arcgisValueChange"]>;
}

interface ReactArcgisTicks extends Partial<Pick<ArcgisTicks, 'interactive' | 'interpolationExponent' | 'labelFormatter' | 'labelPlacement' | 'layout' | 'max' | 'min' | 'mirrored' | 'mode' | 'showBaseline' | 'showLabels' | 'values'>>, HTMLProps<HTMLArcgisTicksElement> {
  onarcgisTickClick?: EventHandler<HTMLArcgisTicksElement["arcgisTickClick"]>;
}

interface ReactArcgisUniqueValuesList extends Partial<Pick<ArcgisUniqueValuesList, 'fieldName' | 'layer' | 'maxHeight' | 'multiple' | 'numberFormatOptions' | 'partialUniqueValues' | 'selectedValues' | 'showFilterLength' | 'sortBy' | 'uniqueValues' | 'view'>>, HTMLProps<HTMLArcgisUniqueValuesListElement> {
  onarcgisChange?: EventHandler<HTMLArcgisUniqueValuesListElement["arcgisChange"]>;
  onarcgisLoad?: EventHandler<HTMLArcgisUniqueValuesListElement["arcgisLoad"]>;
  onarcgisSortByChange?: EventHandler<HTMLArcgisUniqueValuesListElement["arcgisSortByChange"]>;
}

declare module "react" {
  namespace JSX {
    interface IntrinsicElements {
      "arcgis-ckeditor5": ReactArcgisCkeditor5;
      "arcgis-ckeditor5-popover": ReactArcgisCkeditor5Popover;
      "arcgis-color-input": ReactArcgisColorInput;
      "arcgis-field-info": ReactArcgisFieldInfo;
      "arcgis-field-pick-list": ReactArcgisFieldPickList;
      "arcgis-histogram": ReactArcgisHistogram;
      "arcgis-label-input": ReactArcgisLabelInput;
      "arcgis-picker-input": ReactArcgisPickerInput;
      "arcgis-ramp-color": ReactArcgisRampColor;
      "arcgis-ramp-color-break": ReactArcgisRampColorBreak;
      "arcgis-ramp-opacity": ReactArcgisRampOpacity;
      "arcgis-slider": ReactArcgisSlider;
      "arcgis-slider-input": ReactArcgisSliderInput;
      "arcgis-ticks": ReactArcgisTicks;
      "arcgis-unique-values-list": ReactArcgisUniqueValuesList;
    }
  }
}
declare module "react/jsx-runtime" {
  namespace JSX {
    interface IntrinsicElements {
      "arcgis-ckeditor5": ReactArcgisCkeditor5;
      "arcgis-ckeditor5-popover": ReactArcgisCkeditor5Popover;
      "arcgis-color-input": ReactArcgisColorInput;
      "arcgis-field-info": ReactArcgisFieldInfo;
      "arcgis-field-pick-list": ReactArcgisFieldPickList;
      "arcgis-histogram": ReactArcgisHistogram;
      "arcgis-label-input": ReactArcgisLabelInput;
      "arcgis-picker-input": ReactArcgisPickerInput;
      "arcgis-ramp-color": ReactArcgisRampColor;
      "arcgis-ramp-color-break": ReactArcgisRampColorBreak;
      "arcgis-ramp-opacity": ReactArcgisRampOpacity;
      "arcgis-slider": ReactArcgisSlider;
      "arcgis-slider-input": ReactArcgisSliderInput;
      "arcgis-ticks": ReactArcgisTicks;
      "arcgis-unique-values-list": ReactArcgisUniqueValuesList;
    }
  }
}
declare module "react/jsx-dev-runtime" {
  namespace JSX {
    interface IntrinsicElements {
      "arcgis-ckeditor5": ReactArcgisCkeditor5;
      "arcgis-ckeditor5-popover": ReactArcgisCkeditor5Popover;
      "arcgis-color-input": ReactArcgisColorInput;
      "arcgis-field-info": ReactArcgisFieldInfo;
      "arcgis-field-pick-list": ReactArcgisFieldPickList;
      "arcgis-histogram": ReactArcgisHistogram;
      "arcgis-label-input": ReactArcgisLabelInput;
      "arcgis-picker-input": ReactArcgisPickerInput;
      "arcgis-ramp-color": ReactArcgisRampColor;
      "arcgis-ramp-color-break": ReactArcgisRampColorBreak;
      "arcgis-ramp-opacity": ReactArcgisRampOpacity;
      "arcgis-slider": ReactArcgisSlider;
      "arcgis-slider-input": ReactArcgisSliderInput;
      "arcgis-ticks": ReactArcgisTicks;
      "arcgis-unique-values-list": ReactArcgisUniqueValuesList;
    }
  }
}