import { FormButtons } from '@components/admin/FormButtons.js';
import Area from '@components/common/Area.js';
import { Form } from '@components/common/form/Form.js';
import { InputField } from '@components/common/form/InputField.js';
import React from 'react';

interface WidgetEditFormProps {
  action: string;
  gridUrl: string;
  type: {
    code: string;
    description: string;
    settingComponent: string;
    defaultSetting: any;
  };
}

export default function WidgetEditForm({
  action,
  gridUrl,
  type
}: WidgetEditFormProps) {
  return (
    <Form action={action} method="PATCH" id="widgetEditForm" submitBtn={false}>
      <InputField type="hidden" name="type" defaultValue={type.code} />
      <div className="grid grid-cols-3 gap-x-5 grid-flow-row ">
        <div className="col-span-2 grid grid-cols-1 gap-5 auto-rows-max">
          <Area id="leftSide" type={type} noOuter />
        </div>
        <div className="col-span-1 grid grid-cols-1 gap-5 auto-rows-max">
          <Area id="rightSide" type={type} noOuter />
        </div>
      </div>
      <FormButtons formId="widgetEditForm" cancelUrl={gridUrl} />
    </Form>
  );
}

export const layout = {
  areaId: 'content',
  sortOrder: 10
};

export const query = `
  query Query {
    action: url(routeId: "updateWidget", params: [{key: "id", value: getContextValue("widgetUuid")}]),
    gridUrl: url(routeId: "widgetGrid")
    type: widgetType(code: getContextValue('type')) {
      code
      description
      settingComponent
      defaultSetting
    }
  }
`;