export default {
  name: "File Upload",
  acceptsChildren: true,
  category: "Input",
  props: [
    {
      label: "File type",
      name: "acceptType",
      isDefault: true,
      type: { kind: "select" },
      default: "image/*",
      options: [
        { label: "Image", value: "image/*" },
        { label: "Video", value: "video/*" },
        { label: "File", value: "application/*" },
      ],
      placeholder: "",
      help: "The file type to use",
    },
    {
      label: "Extensions",
      name: "extensions",
      type: { kind: "text", isDynamic: true },
      default: "",
      placeholder: "defaults for file type",
      help: "A comma separated list of extensions ('.png, .jpeg'). Leave blank to use the default.",
    },
    {
      label: "Allow multiple",
      name: "allowMultiple",
      isDefault: true,
      type: { kind: "boolean", isDynamic: true },
      default: false,
      placeholder: "",
      help: "If input accepts mutliple files",
    },
    {
      label: "Required",
      name: "required",
      isDefault: true,
      type: { kind: "boolean" },
      default: false,
      placeholder: "",
      help: "The is this value required by a form?",
    },
    {
      label: "Min size",
      name: "minSize",
      type: { kind: "number", isDynamic: true },
      default: 0,
      placeholder: "Enter a number...",
      help: "The minimum file size in bytes",
    },
    {
      label: "Max size",
      name: "maxSize",
      type: { kind: "number", isDynamic: true },
      default: null,
      placeholder: "Enter a number...",
      help: "The maximum file size in bytes",
    },
    {
      label: "Capture",
      name: "capture",
      type: { kind: "select" },
      default: "implementation",
      options: [
        { label: "Unset", value: "implementation" },
        { label: "Environement", value: "environment" },
        { label: "User", value: "user" },
      ],
      placeholder: "",
      help: "The capture type. 'User' for camera, 'Environment' for camera, 'Unset' for default",
    },
  ],
  additionalStates: [
    {
      label: "Is dragging over",
      value: '[data-drag-active="true"]',
    },
  ],
  events: [
    {
      label: "When dropped",
      name: "handleDrop",
      help: "Select an action to run when input's value has changed",
    },
    {
      label: "When success",
      name: "onSuccess",
      isDefault: true,
      help: "Select an action to run when the files have been uploaded",
    },
  ],
  defaultStyles: {
    ":hover": {
      "border-color": "var(--theme-brand-neutral-300)",
    },
    ":focus": {
      "border-color": "var(--theme-brand-brand-ring)",
    },
    ":error": {
      "border-color": "var(--theme-border-error)",
    },
    ":disabled": {
      opacity: 0.4,
      cursor: "not-allowed",
    },
    "": {
      "flex-grow": "0",
      "flex-shrink": "1",
      "flex-basis": "auto",
      display: "flex",
      "flex-direction": "row",
      "justify-content": "center",
      "align-items": "center",
      gap: "0px",
      width: "auto",
      height: "auto",
      "min-width": "auto",
      "min-height": "200px",
      "max-width": "100%",
      "max-height": "100%",
      "padding-left": "16px",
      "padding-right": "16px",
      "padding-top": "16px",
      "padding-bottom": "16px",
      "border-color": "var(--theme-border-default)",
      "border-radius": "var(--theme-radii-md)",
      "border-width": "2px",
      "border-style": "dashed",
      "background-color": "var(--theme-bg-subtle)",
      "box-shadow": "var(--theme-shadows-none)",
      outline: "var(--theme-sizes-zero)",
    },
  },
  sources: [
    {
      id: "progress",
      provider: "StateProvider",
      name: "{{= it.component.name }}'s progress",
      description: "Returns the progress of the upload 0 - 100",
      template: "$get('{{= it.component.id}}', { progress: 0 }).progress",
      instanceTemplate: `{{= it.component.name }}'s progress`,
      outputType: { kind: "number" },
    },
    {
      id: "error",
      name: "{{= it.component.name }}'s has error",
      provider: "StateProvider",
      description: "Whether the upload has an error",
      template: "$get('{{= it.component.id}}', { error: false }).error",
      instanceTemplate: `{{= it.component.name }} has error`,
      outputType: { kind: "boolean" },
    },
    {
      id: "file",
      name: "{{= it.component.name }}'s file(s)",
      provider: "StateProvider",
      description: "The uploaded file(s)",
      template: "$get('{{= it.component.id}}', { file: null }).file",
      instanceTemplate: `{{= it.component.name }}'s file(s)`,
      outputType: {
        kind: "file",
        dynamicList: "{{? it.allowMultiple }}true{{??}}false{{?}}",
      },
    },
  ],
  actions: [
    {
      id: "open",
      name: `Open "{{= it.component.name }}" input`,
      description: "Open the input",
      async: false,
      template:
        'document.querySelector(`[data-id="${$$getKey({{= it.stringify(it.component.id) }})}"]`)?.click();',
      instanceTemplate: ``,
      props: [],
    },
    {
      id: "clear",
      name: `clear "{{= it.component.name }}"'s value`,
      provider: "StateProvider",
      description: "clear the value of the state variable",
      async: false,
      template:
        // eslint-disable-next-line no-template-curly-in-string
        "$set('{{= it.component.id }}', { file: null, error: false, progress: 0 });",
      instanceTemplate: ``,
      props: [],
    },
  ],
} as const;