import { createElement, lazy } from 'react'

const EmailTemplateInfo = lazy(
  () =>
    import('../../components/Dashboard/Management/EmailTemplates/EmailTemplateInfo')
)
const NewEmailTemplate = lazy(
  () =>
    import('../../components/Dashboard/Management/EmailTemplates/NewEmailTemplate')
)
const DeleteObject = lazy(
  () => import('../../components/Dashboard/common/DeleteObject')
)
import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
import PlusIcon from '../../components/Icons/PlusIcon'
import EditIcon from '../../components/Icons/EditIcon'
import CheckIcon from '../../components/Icons/CheckIcon'
import XMarkIcon from '../../components/Icons/XMarkIcon'
import DesignIcon from '../../components/Icons/DesignIcon'
import ListIcon from '../../components/Icons/ListIcon'
import EmailTemplateIcon from '../../components/Icons/EmailTemplateIcon'
import DuplicateIcon from '../../components/Icons/DuplicateIcon'
import BinIcon from '../../components/Icons/BinIcon'

const computeTemplateResources = (resources) => {
  if (!Array.isArray(resources)) return []

  const usedNames = new Set()
  const nextSuffix = new Map()

  return resources.map((resource) => {
    const filename = resource?.file?.filename || resource?.file?.name || ''
    const baseName =
      filename
        .replace(/\.[^.]*$/, '')
        .toLowerCase()
        .replace(/[^a-z0-9]+/g, '-')
        .replace(/^-+|-+$/g, '') || 'resource'
    let name = baseName
    let suffix = nextSuffix.get(baseName) || 1

    while (usedNames.has(name)) {
      name = `${baseName}-${suffix}`
      suffix += 1
    }

    usedNames.add(name)
    nextSuffix.set(baseName, suffix)
    return { ...resource, name }
  })
}

export const EmailTemplate = {
  name: 'emailTemplate',
  label: 'Email Template',
  labelPlural: 'Email Templates',
  endpoint: 'emailtemplates',
  url: '/dashboard/management/emailtemplates',
  prefix: 'ETP',
  icon: EmailTemplateIcon,
  actions: [
    {
      name: 'new',
      type: 'modal',
      pageName: 'list',
      modalWidth: 700,
      label: 'New Email Template',
      icon: PlusIcon,
      content: (objectData, { onOk } = {}) => {
        return createElement(NewEmailTemplate, {
          defaultValues: objectData,
          onOk,
          reset: true
        })
      }
    },
    {
      name: 'duplicate',
      type: 'alias',
      objectType: 'emailTemplate',
      aliasAction: 'new',
      pageName: 'info',
      label: 'Duplicate',
      icon: DuplicateIcon,
      objectData: (objectData) => objectData
    },
    {
      name: 'list',
      type: 'page',
      pageName: 'list',
      label: 'List',
      icon: ListIcon
    },
    {
      name: 'design',
      label: 'Design',
      row: true,
      icon: DesignIcon,
      url: (_id) =>
        `/dashboard/management/emailtemplates/design?emailTemplateId=${_id}`
    },
    {
      name: 'info',
      type: 'page',
      pageName: 'info',
      label: 'Info',
      default: true,
      row: true,
      icon: InfoCircleIcon
    },
    {
      name: 'edit',
      type: 'page',
      pageName: 'info',
      label: 'Edit',
      row: true,
      icon: EditIcon,
      visible: (objectData) => {
        return !(objectData?._isEditing && objectData?._isEditing == true)
      }
    },
    {
      name: 'cancelEdit',
      label: 'Cancel Edits',
      type: 'page',
      pageName: 'info',
      icon: XMarkIcon,
      visible: (objectData) => {
        return objectData?._isEditing && objectData?._isEditing == true
      }
    },
    {
      name: 'finishEdit',
      label: 'Save Edits',
      type: 'page',
      pageName: 'info',
      icon: CheckIcon,
      visible: (objectData) => {
        return objectData?._isEditing && objectData?._isEditing == true
      }
    },
    { type: 'divider' },
    {
      name: 'delete',
      bulk: true,
      type: 'modal',
      modalWidth: 520,
      modalCentered: true,
      label: 'Delete',
      icon: BinIcon,
      danger: true,
      content: (objectData, { onOk } = {}) => {
        return createElement(DeleteObject, { objectData, onOk })
      }
    }
  ],
  pages: [
    {
      name: 'info',
      content: () => createElement(EmailTemplateInfo)
    }
  ],
  columns: [
    '_reference',
    'name',
    'active',
    'global',
    'objectType',
    'tags',
    'parent',
    'referencedTemplates',
    'createdAt',
    'updatedAt'
  ],
  filters: [
    'name',
    'tags',
    'active',
    'global',
    'parent',
    'referencedTemplates',
    'objectType',
    'createdAt',
    'updatedAt',
    '_reference'
  ],
  group: ['tags', 'objectType'],
  sorters: [
    'name',
    'parent',
    'createdAt',
    'updatedAt',
    'active',
    'global',
    'objectType'
  ],
  properties: [
    {
      name: '_id',
      label: 'ID',
      type: 'id',
      objectType: 'emailTemplate',
      showCopy: true,
      columnWidth: 140
    },
    {
      name: 'createdAt',
      label: 'Created At',
      type: 'dateTime',
      readOnly: true,
      columnWidth: 200
    },

    {
      name: '_reference',
      label: 'Reference',
      type: 'reference',
      objectType: 'emailTemplate',
      showCopy: true,
      readOnly: true,
      columnFixed: 'left',
      columnWidth: 180
    },
    {
      name: 'updatedAt',
      label: 'Updated At',
      type: 'dateTime',
      readOnly: true,
      columnWidth: 200
    },
    {
      name: 'name',
      label: 'Name',
      type: 'text',
      required: true,
      columnFixed: 'left',
      columnWidth: 200
    },
    {
      name: 'objectType',
      label: 'Object Type',
      type: 'objectType',
      required: true,
      empty: (data) => data?.global,
      columnWidth: 180
    },
    {
      name: 'active',
      label: 'Active',
      type: 'bool',
      required: true,
      columnWidth: 125
    },
    { name: 'tags', label: 'Tags', type: 'tags', columnWidth: 200 },
    {
      name: 'global',
      label: 'Global',
      type: 'bool',
      required: true,
      columnWidth: 125
    },
    {
      name: 'parent',
      label: 'Parent',
      type: 'object',
      objectType: 'emailTemplate',
      masterFilter: { global: true, active: true },
      showHyperlink: true,
      empty: (data) => data?.global,
      columnWidth: 230
    },
    {
      name: 'referencedTemplates',
      label: 'Referenced Templates',
      type: 'objectList',
      objectType: 'emailTemplate',
      readOnly: true,
      showHyperlink: true,
      columnWidth: 230
    },
    {
      name: 'subject',
      label: 'Subject',
      type: 'text',
      required: true,
      columnWidth: 300
    },
    {
      name: 'content',
      label: 'Content',
      type: 'codeBlock',
      language: 'fcTemplateLang'
    },
    {
      name: 'testObject',
      label: 'Test Object',
      type: 'object',
      objectType: (data) => data?.objectType,
      showHyperlink: true
    },
    {
      name: 'resources',
      label: 'Resources',
      type: 'objectChildren',
      required: false,
      canAddRemove: true,
      size: 'medium',
      columns: ['name', 'file'],
      value: (emailTemplate) =>
        computeTemplateResources(emailTemplate?.resources),
      properties: [
        {
          name: 'name',
          label: 'Name',
          type: 'text',
          required: true,
          readOnly: true,
          columnWidth: 200
        },
        {
          name: 'file',
          required: true,
          label: 'File',
          type: 'file',
          showPreview: false,
          showHyperlink: true,
          masterFilter: ['.pdf', '.jpeg', '.png', '.svg', '.gif'],
          thumbnail: true,
          columnWidth: 200
        }
      ]
    },
    {
      name: 'attachments',
      label: 'Attachments',
      type: 'objectChildren',
      required: false,
      canAddRemove: true,
      size: 'medium',
      columns: ['type', 'file', 'fileName', 'fileType'],
      properties: [
        {
          name: 'type',
          label: 'Type',
          type: 'objectType',
          required: true,
          columnWidth: 180,
          masterFilter: ['file', 'documentTemplate']
        },
        {
          name: 'file',
          label: 'File',
          type: 'object',
          objectType: (row) => row?.type,
          required: true,
          showHyperlink: true,
          columnWidth: 230,
          masterFilter: (row, parentData) => {
            if (row?.type === 'documentTemplate') {
              return {
                active: true,
                global: false,
                objectType: parentData?.objectType
              }
            }
            return undefined
          }
        },
        {
          name: 'fileName',
          label: 'File Name',
          type: 'text',
          required: true,
          columnWidth: 200,
          value: (row) => {
            if (row?.fileName) return row.fileName
            return row?.file?.name
          }
        },
        {
          name: 'fileType',
          label: 'File Type',
          type: 'select',
          columnWidth: 140,
          disabled: (row) => row?.type !== 'documentTemplate',
          options: [
            { value: 'pdf', label: 'PDF' },
            { value: 'jpeg', label: 'JPEG' },
            { value: 'png', label: 'PNG' },
            { value: 'svg', label: 'SVG' }
          ],
          value: (row) => {
            if (row?.type === 'documentTemplate') {
              return row?.fileType || 'pdf'
            }
            return row?.fileType
          }
        }
      ]
    }
  ]
}