import { ChooserColumn } from "../../../data/setting";
import FactoryRenderer from "../../../../../Renderer";

type DragDropContainer = {
  column: ChooserColumn;
  excludeIncludeToCard: (id: number) => void;
  toggleFreeze: (id: number) => void;
  onFieldAddOrRemove: (id: number) => void;
};

const DragDropContainer = ({
  column,
  excludeIncludeToCard,
  toggleFreeze,
  onFieldAddOrRemove,
}: DragDropContainer) => {
  return (
    <div className="tmpl-chooser-setting-container" key={column.id}>
      <div className="tmpl-chooser-setting-label">
        {/* Deliberately NOT the ICON widget: that widget renders a Kendo
            <Button>, and react-beautiful-dnd refuses to start a drag from a
            <button>, which would kill the drag handle this glyph exists to
            advertise. The grip itself is drawn in CSS — see the `.k-i-drag`
            rule in GridToolBar/scss.

            `primary` rows are rendered by ColumnChooserView *outside* a
            <Draggable>, so they cannot be reordered: hide the grip there
            rather than advertise a gesture that does nothing. Hidden, not
            removed, so the labels stay aligned down the column — the same
            trick the remove icon below uses for primary rows. */}
        <span
          className={`k-icon k-font-icon k-i-drag${
            column.primary ? " tmpl-drag-disabled" : ""
          }`}
          role="presentation"
        />
        <p>{column.label}</p>
      </div>

      <div>
        <FactoryRenderer
          uiElementType="WIDGET"
          widgetType="CHECKBOX"
          // `htmlFor` must match the input's id or withLabel's <label> is not
          // associated with it — Kendo's own `label` prop used to do this, so
          // without it the caption text stops toggling the box and the input
          // loses its accessible name.
          widgetStyle={{
            id: `include-card-${column.id}`,
            className: "tmpl-include-card tmpl-checkbox",
          }}
          label={{
            position: "right",
            title: "Include in card",
            isApply: true,
            htmlFor: `include-card-${column.id}`,
          }}
          value={column.includeInCard}
          // The widget relays (callBack, screenDataField, value, event), not a
          // DOM event; the id is closed over, so no relayed arg is needed.
          onChange={() => {
            excludeIncludeToCard(column.id);
          }}
        />
        {/* `toggleFreeze` is a BOUNDARY setter — it freezes every row up to the
            clicked one and unfreezes the rest — so it must run even when the
            radio is already checked (e.g. shrinking the frozen range by
            clicking the topmost frozen row). A controlled radio fires no
            change event in that case, so the trigger stays a click on the
            wrapper, reproducing the original Kendo `onClick` semantics. */}
        <div onClick={() => toggleFreeze(column.id)}>
          <FactoryRenderer
            uiElementType="WIDGET"
            widgetType="RADIOBUTTON"
            widgetStyle={{
              id: `freeze-${column.id}`,
              className: "tmpl-radio",
            }}
            label={{
              position: "right",
              title: "Freeze",
              isApply: true,
              htmlFor: `freeze-${column.id}`,
            }}
            //disabled={column.primary}
            value={column.primary === true ? true : column.isFreezed}
          />
        </div>

        {column.primary !== true ? (
          <FactoryRenderer
            name="close"
            uiElementType="WIDGET"
            widgetType="ICON"
            fillMode="clear"
            title=""
            aria-label="Remove column"
            widgetStyle={{ className: "qo-btn tmpl-button-icon qo-text-danger" }}
            onClick={() => {
              if (column.primary !== true) {
                onFieldAddOrRemove(column.id);
              }
            }}
          />
        ) : (
          <FactoryRenderer
            name="close"
            uiElementType="WIDGET"
            widgetType="ICON"
            fillMode="clear"
            title=""
            aria-hidden="true"
            tabIndex={-1}
            // A placeholder holding the remove button's slot so the primary
            // row's toggles line up with every other row's. `qo-invisible` is
            // the theme's `visibility: hidden`; it was an inline style.
            widgetStyle={{ className: "qo-btn tmpl-button-icon qo-text-danger qo-invisible" }}
          />
        )}
      </div>
    </div>
  );
};
export default DragDropContainer;