import {
  FIELD_CHECKBOX,
  FIELD_DATE,
  FIELD_EMAIL,
  FIELD_RADIO,
  FIELD_SELECT,
  FIELD_TEXT,
  FIELD_TEXTAREA,
} from '@/modules/forms/editor/constants';

// static widgets
export const createWidgetLogoMetadata = ({ src, order }) => ({
  columns: 12,
  order,
  widget: {
    component: 'Logo',
    props: {
      src,
    },
  },
});

export const createWidgetBannerMetadata = ({ src, order }) => ({
  columns: 12,
  order,
  widget: {
    component: 'Banner',
    props: {
      src,
    },
  },
});

export const createWidgetTitleMetadata = ({ text, order }) => ({
  columns: 12,
  order,
  widget: {
    component: 'Title',
    props: {
      text,
    },
  },
});

export const createWidgetDescriptionMetadata = ({ text, order }) => ({
  columns: 12,
  order,
  widget: {
    component: 'Description',
    props: {
      text,
    },
  },
});

export const createStaticWidget = {
  logo: createWidgetLogoMetadata,
  banner: createWidgetBannerMetadata,
  title: createWidgetTitleMetadata,
  description: createWidgetDescriptionMetadata,
};

// form fields widgets
export const createWidgetTextField = ({ id, value, defaultValue, isRequire = true, order }) => ({
  columns: '12',
  order,
  widget: {
    component: FIELD_TEXT,
    props: {
      type: 'text',
      name: id,
      placeholder: value,
      defaultValue,
      validation: {
        required: {
          value: isRequire,
          errMsg: 'Is required',
        },
      },
    },
  },
});

export const createWidgetTextAreaField = ({ id, value, defaultValue, isRequire = true, order }) => ({
  columns: '12',
  order,
  widget: {
    component: FIELD_TEXTAREA,
    props: {
      name: id,
      placeholder: value,
      defaultValue,
      validation: {
        required: {
          value: isRequire,
          errMsg: 'Is required',
        },
      },
    },
  },
});

export const createWidgetEmailField = ({ id, value, defaultValue, isRequire = true, order }) => ({
  columns: '12',
  order,
  widget: {
    component: FIELD_EMAIL,
    props: {
      type: 'email',
      name: id,
      placeholder: value,
      defaultValue,
      validation: {
        required: {
          value: isRequire,
          errMsg: 'Is required',
        },
      },
    },
  },
});

export const createWidgetDateField = ({ id, value, defaultValue, isRequire = true, order }) => ({
  columns: '12',
  order,
  widget: {
    component: FIELD_DATE,
    props: {
      name: id,
      label: value,
      defaultValue,
      day: {
        label: 'Day',
      },
      month: {
        label: 'Month',
      },
      year: {
        label: 'Year',
      },
      validation: {
        required: {
          value: isRequire,
          errMsg: 'Is required',
        },
      },
    },
  },
});

export const createWidgetSelectField = ({ id, value, isRequire = true, options, order }) => ({
  columns: '12',
  order,
  widget: {
    component: FIELD_SELECT,
    props: {
      name: id,
      label: value,
      options: options.map((option) => ({
        value: option.id,
        label: option.name,
        isSelected: option.isDefault,
      })),
      validation: {
        required: {
          value: isRequire,
          errMsg: 'Is required',
        },
      },
    },
  },
});

export const createWidgetRadioField = ({ id, value, isRequire = true, options, order }) => ({
  columns: '12',
  order,
  widget: {
    component: FIELD_RADIO,
    props: {
      name: id,
      label: value,
      options: options.map((option) => ({
        value: option.id,
        label: option.name,
        isSelected: option.isDefault,
      })),
      validation: {
        required: {
          value: isRequire,
          errMsg: 'Is required',
        },
      },
    },
  },
});

export const createWidgetCheckboxField = ({ id, value, isRequire = true, options, order }) => ({
  columns: '12',
  order,
  widget: {
    component: FIELD_CHECKBOX,
    props: {
      name: id,
      label: value,
      options: options.map((option) => ({
        value: option.id,
        label: option.name,
        isSelected: option.isDefault,
      })),
      validation: {
        required: {
          value: isRequire,
          errMsg: 'Is required',
        },
      },
    },
  },
});

export const createFieldWidget = {
  [FIELD_TEXT]: createWidgetTextField,
  [FIELD_TEXTAREA]: createWidgetTextAreaField,
  [FIELD_EMAIL]: createWidgetEmailField,
  [FIELD_DATE]: createWidgetDateField,
  [FIELD_SELECT]: createWidgetSelectField,
  [FIELD_RADIO]: createWidgetRadioField,
  [FIELD_CHECKBOX]: createWidgetCheckboxField,
};
