import { Checkbox, RadioButton } from "@progress/kendo-react-inputs";
import { Icon } from "@progress/kendo-react-common";
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">
        <Icon name="drag" />
        <p>{column.label}</p>
      </div>

      <div>
        <Checkbox
          className="tmpl-include-card tmpl-checkbox"
          label="Include in card"
          checked={column.includeInCard}
          onChange={() => {
            excludeIncludeToCard(column.id);
          }}
        />
        <div>
          <RadioButton
            label="Freeze"
            className="tmpl-radio"
            //disabled={column.primary}
            checked={column.primary === true ? true : column.isFreezed}
            onClick={() => {
              toggleFreeze(column.id);
            }}
          />
        </div>

        {column.primary !== true ? (
          <FactoryRenderer
            name="close"
            uiElementType="WIDGET"
            widgetType="ICON"
            fillMode="clear"
            title=""
            widgetStyle={{ className: "qo-btn qo-text-danger" }}
            onClick={() => {
              if (column.primary !== true) {
                onFieldAddOrRemove(column.id);
              }
            }}
          />
        ) : (
          <FactoryRenderer
            name="close"
            uiElementType="WIDGET"
            widgetType="ICON"
            fillMode="clear"
            title=""
            widgetStyle={{ className: "qo-btn qo-text-danger", inline: { visibility: "hidden" } }}
          />
        )}
      </div>
    </div>
  );
};
export default DragDropContainer;