import {
  visibilityStates,
  SeamlyGeneralError,
  SeamlyOfflineError,
  randomId,
} from '@seamly/web-ui'
import { addTranslationData } from './state-helpers/index'

const baseState = {
  events: [],
  config: {
    layoutMode: 'inline',
    accountConfig: {},
    hideOnNoUserResponse: false,
    showDisclaimer: false,
    showSuggestions: true,
    preChat: true,
  },
  context: {},
  initialState: {},
  unreadEvents: 0,
  loadedImageEventIds: [],
  isLoading: false,
  idleDetachCountdown: { hasCountdown: false, isActive: false },
  resumeConversationPrompt: false,
  visibility: {
    visibility: visibilityStates.open,
    showPreChat: true,
    showContinueChat: true,
  },
  serviceInfo: {
    activeServiceSessionId: '',
  },
  participantInfo: {
    participants: {},
    currentAgent: '',
  },
  headerTitles: {
    title: 'Test title',
    subTitle: 'Test subtitle',
  },
  interrupt: {
    error: undefined,
  },
  historyLoaded: false,
  skiplinkTargetId: randomId(),
  optionsButtonId: randomId(),
  serviceData: {},
  options: {
    features: {},
    panelActive: false,
    optionActive: '',
    userSelectedOptions: {},
  },
  entryMeta: {
    default: 'text',
    active: 'text',
    userSelected: null,
    options: {},
    optionsOverride: {},
  },
  currentUploads: [],
  processingFileUploads: [],
}

const avatar =
  'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzMiAzMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjNEE0OEMxIiBkPSJNMTAsMTQuOGMtMS4xLDAtMi0wLjktMi0yczAuOS0yLDItMnMyLDAuOSwyLDJTMTEuMSwxNC44LDEwLDE0Ljh6IE0xNS45LDE0LjhjMS4xLDAsMi0wLjksMi0ycy0wLjktMi0yLTIKCXMtMiwwLjktMiwyUzE0LjgsMTQuOCwxNS45LDE0Ljh6IE0yMS44LDEwLjhjLTEuMSwwLTIsMC45LTIsMnMwLjksMiwyLDJzMi0wLjksMi0yUzIyLjksMTAuOCwyMS44LDEwLjh6IE0yMS4zLDE4LjFIMTAuNwoJQzExLjcsMjMuOSwyMC4yLDIzLjksMjEuMywxOC4xeiIvPgo8L3N2Zz4K'
const transferAvatar =
  'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzMiAzMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjNEE0OEMxIiBkPSJNMTAuMSwxNC45Yy0xLjEsMC0yLTAuOS0yLTJzMC45LTIsMi0yczIsMC45LDIsMlMxMS4yLDE0LjksMTAuMSwxNC45eiBNMjEuOSwxMC45Yy0xLjEsMC0yLDAuOS0yLDIKCXMwLjksMiwyLDJzMi0wLjksMi0yUzIzLDEwLjksMjEuOSwxMC45eiBNMjEuNCwxOC4ySDEwLjhDMTEuOCwyNCwyMC4zLDI0LDIxLjQsMTguMnogTTE3LjIsMjUuM2gtMi40Yy0wLjYsMC0xLjIsMC40LTEuNCwxCgljLTUuMS0wLjItOS4yLTQuNC05LjQtOS42YzAuMSwwLDAuMiwwLjEsMC40LDAuMWgwLjFjMC44LDAsMS40LTAuNiwxLjQtMS40di00LjdjMC0wLjgtMC42LTEuNC0xLjQtMS40aDBjLTAuOCwwLTEuNCwwLjYtMS40LDEuNAoJdjIuN3YydjEuMWMwLDUuOSw0LjcsMTAuNiwxMC41LDEwLjhjMC4yLDAuNSwwLjcsMC44LDEuMiwwLjhoMi40YzAuOCwwLDEuNC0wLjYsMS40LTEuNFMxOCwyNS4zLDE3LjIsMjUuM3oiLz4KPC9zdmc+Cg=='

const participantInfo = {
  participants: {
    agent: {
      id: 'agent',
      service: {
        expose: { map: {}, version: 2 },
        meta: {},
        name: null,
        service_session_id: null,
        settings: {},
      },
    },
    user: {
      id: 'user',
      service: {
        expose: { map: {}, version: 2 },
        meta: {},
        name: null,
        service_session_id: null,
        settings: {},
      },
    },
  },
  currentAgent: 'agent',
}

const newTopicDivider = {
  type: 'info',
  payload: {
    body: { subtype: 'new_topic', type: 'divider' },
    fromClient: false,
    fromHistory: true,
    id: randomId(),
    transactionId: '_1y9pz5fbyly',
    type: 'divider',
  },
}

const newTranslationDividerStart = {
  type: 'info',
  payload: {
    body: {
      language: 'Nederlands',
      restartButtonText: null,
      subtype: 'new_translation',
      text: '[NL] Automatic translation to Dutch started. Please note that automatic translations may contain errors.',
      title: '[NL] Translating to Dutch',
      translationEnabled: true,
      userLocale: 'nl',
    },
    fromClient: false,
    fromHistory: true,
    id: randomId(),
    occurredAt: 1625658300534259,
    participant: null,
    service: {
      meta: {},
      name: null,
      serviceSessionId: null,
    },
    transactionId: null,
    translatedBody: null,
    type: 'divider',
  },
}

const newTranslationDividerStartTwo = {
  type: 'info',
  payload: {
    body: {
      language: 'Nederlands',
      subtype: 'new_translation',
      text: '[NL] Automatic translation to Dutch started. Please note that automatic translations may contain errors.',
      translationEnabled: true,
      userLocale: 'nl',
    },
    fromClient: false,
    fromHistory: true,
    id: randomId(),
    occurredAt: 1625658300534259,
    participant: null,
    service: {
      meta: {},
      name: null,
      serviceSessionId: null,
    },
    transactionId: null,
    translatedBody: null,
    type: 'divider',
  },
}
const newTranslationDividerStop = {
  type: 'info',
  payload: {
    body: {
      language: 'Nederlands',
      restartButtonText: '[NL] Start again',
      subtype: 'new_translation',
      text: null,
      title: '[NL] Automatic translation to Dutch ended',
      translationEnabled: false,
      userLocale: 'nl',
    },
    fromClient: false,
    fromHistory: true,
    id: randomId(),
    occurredAt: 1625658300534259,
    participant: null,
    service: {
      meta: {},
      name: null,
      serviceSessionId: null,
    },
    transactionId: null,
    translatedBody: null,
    type: 'divider',
  },
}

const infoMessage = {
  type: 'info',
  payload: {
    body: {
      text: 'This is a system generated info message',
      type: 'text',
    },
    fromClient: false,
    id: randomId(),
    participant: null,
    service: {
      meta: { additions: { hideFeedback: 'true' } },
      name: 'bot',
      serviceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35',
    },
    transactionId: null,
    type: 'text',
  },
}

const transcriptInfoMessage = {
  type: 'info',
  payload: {
    body: {
      key: ['info', 'sendTranscript', 'accepted'],
      variables: { emailAddress: 'test@test.com' },
    },
    fromClient: false,
    id: randomId(),
    participant: null,
    service: { meta: {}, name: null, serviceSessionId: null },
    transactionId: null,
    type: 'translation',
  },
}

const headerTitles = { title: "You're talking to", subTitle: 'Mrs. Bot' }

const participantMessage = {
  type: 'participant',
  payload: {
    fromClient: false,
    fromHistory: true,
    id: randomId(),
    messageStatus: 'received',
    participant: {
      avatar,
      id: 'agent',
      introduction: "You're now talking to Mrs. Bot gimme a minit",
      name: 'Mrs. Bot',
      service: {
        expose: { map: {}, version: 2 },
        meta: {},
        name: null,
        service_session_id: null,
        settings: {},
      },
    },
    transactionId: 'd63655bf-1d3d-42cf-b14e-4da9e2b6a642',
    type: 'participant',
  },
}

const participantTransferMessage = {
  type: 'participant',
  payload: {
    fromClient: false,
    fromHistory: true,
    id: randomId(),
    messageStatus: 'received',
    participant: {
      introduction:
        'Welcome, you are now chatting with Mrs. Bot 2, give me a minit to read back the chat history.',
      id: 'agent',
      avatar: transferAvatar,
      name: 'Two',
      service: {
        expose: { map: {}, version: 3 },
        meta: {},
        name: 'new service',
        serviceSessionId: randomId(),
        settings: {},
      },
    },
    transactionId: randomId(),
    type: 'participant',
  },
}

const participantMessageDefaultIcon = {
  type: 'participant',
  payload: {
    fromClient: false,
    fromHistory: true,
    id: randomId(),
    messageStatus: 'received',
    participant: {
      id: 'user',
      introduction: "You're now talking to Mrs. Bot gimme a minit",
      name: 'Mrs. Bot',
      service: {
        expose: { map: {}, version: 2 },
        meta: {},
        name: null,
        service_session_id: null,
        settings: {},
      },
    },
    transactionId: 'd63655bf-1d3d-42cf-b14e-4da9e2b6a642',
    type: 'participant',
  },
}

const getCustomMessage = ({ type, data, text }) => ({
  type: 'message',
  payload: {
    body: {
      type,
      text,
      data,
    },
    participant: 'agent',
    service: {
      meta: { additions: {} },
      name: 'bot',
      serviceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35',
    },
    fromClient: false,
    fromHistory: true,
    id: '4efacb4d-28a0-454e-8e36-3f17eb598c5d',
    messageStatus: 'read',
    transactionId: '6f9beee7-ce82-418e-9bec-8001079aa769',
    transactionLast: true,
    type: 'custom',
  },
})

const shortTextMessage = {
  type: 'message',
  payload: {
    body: {
      text: 'What do you want to do?',
      type: 'text',
      data: undefined,
    },
    fromClient: false,
    fromHistory: true,
    id: randomId(),
    messageStatus: 'read',
    participant: 'agent',
    service: {
      meta: { additions: {} },
      name: 'bot',
      serviceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35',
    },
    transactionId: 'b947b684-93df-4bd9-a8ea-e2f1b5a7a480',
    transactionLast: false,
    type: 'text',
  },
}

const splashMessage = {
  type: 'message',
  payload: {
    type: 'splash',
    id: randomId(),
    body: {
      text: 'Example splash message ✨',
      type: 'text',
      variables: {},
    },
  },
}

const longTextMessage = {
  type: 'message',
  payload: {
    body: {
      text: 'What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am. What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am. What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am.',
      type: 'text',
    },
    fromClient: false,
    fromHistory: true,
    id: randomId(),
    messageStatus: 'read',
    participant: 'agent',
    service: {
      meta: { additions: {} },
      name: 'bot',
      serviceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35',
    },
    transactionId: 'b947b684-93df-4bd9-a8ea-e2f1b5a7a480',
    transactionLast: false,
    type: 'text',
  },
}

const textMessageBoldItalicUnderline = {
  type: 'message',
  payload: {
    body: {
      text: 'Bubble with <strong>bold</strong> <em>italic</em> <u>underline</u>',
      type: 'text',
    },
    fromClient: false,
    fromHistory: true,
    id: randomId(),
    messageStatus: 'read',
    participant: 'agent',
    service: {
      meta: { additions: { hideFeedback: 'true' } },
      name: 'bot',
      serviceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35',
    },
    transactionId: 'd0cc13da-337a-4108-9db1-cb8a3b3a1446',
    transactionLast: false,
    type: 'text',
  },
}

const textMessageWithLinks = {
  type: 'message',
  payload: {
    body: {
      text: '<a href="https://google.com" data-link-id="1">Link in same window</a> and <a href="https://google.com" data-link-id="2" target="_blank">link in new window</a> embedded in text',
      type: 'text',
    },
    fromClient: false,
    fromHistory: true,
    id: randomId(),
    messageStatus: 'read',
    participant: 'agent',
    service: {
      meta: { additions: { hideFeedback: 'true' } },
      name: 'bot',
      serviceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35',
    },
    transactionId: 'd0cc13da-337a-4108-9db1-cb8a3b3a1446',
    transactionLast: false,
    type: 'text',
  },
}

const textMessageWithLongLink = {
  type: 'message',
  payload: {
    body: {
      text: 'Here is a long link <a href="https://google.com" data-link-id="1">click me click me please click me yoohoooo please please click me here I am click me now what are you waiting for click me now now now now now click meeeeeeeeeeeeee</a> embedded in text',
      type: 'text',
    },
    fromClient: false,
    fromHistory: true,
    id: 'a964e54e-ea98-46ff-a952-979a47f162c0',
    messageStatus: 'read',
    participant: 'agent',
    service: {
      meta: { additions: { hideFeedback: 'true' } },
      name: 'bot',
      serviceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35',
    },
    transactionId: 'd0cc13da-337a-4108-9db1-cb8a3b3a1446',
    transactionLast: false,
    type: 'text',
  },
}

const textMesageWithBullets = {
  type: 'message',
  payload: {
    body: {
      text: `
      <ul>
        <li>Short list item</li>
        <li>This list item is longer to showcase different type lengths of text in list items and how they reflow in the browser</li>
        <li>
          This list item has a nested list with 3 items in it.
          <ul>
            <li>First item</li>
            <li>second item</li>
            <li>Third item</li>
          </ul>
        </li>
        <li>Another one just to be sure :)</li>
      </ul>
      `,
      type: 'text',
    },
    fromClient: false,
    fromHistory: true,
    id: 'f5351010-0def-452d-818f-ca22ac61792a',
    messageStatus: 'read',
    participant: 'agent',
    service: {
      meta: { additions: { hideFeedback: 'true' } },
      name: 'bot',
      serviceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35',
    },
    transactionId: 'd0cc13da-337a-4108-9db1-cb8a3b3a1446',
    transactionLast: false,
    type: 'text',
  },
}

const textMesageWithOrderedList = {
  type: 'message',
  payload: {
    body: {
      text: `
      <ol>
        <li>Short list item</li>
        <li>This list item is longer to showcase different type lengths of text in list items and how they reflow in the browser</li>
        <li>
          This list item has a nested list with 3 items in it.
          <ol>
            <li>First item</li>
            <li>second item</li>
            <li>Third item</li>
          </ol>
        </li>
        <li>Another one just to be sure :)</li>
      </ol>
      `,
      type: 'text',
    },
    fromClient: false,
    fromHistory: true,
    id: 'f5351010-0def-452d-818f-ca22ac61792a',
    messageStatus: 'read',
    participant: 'agent',
    service: {
      meta: { additions: { hideFeedback: 'true' } },
      name: 'bot',
      serviceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35',
    },
    transactionId: 'd0cc13da-337a-4108-9db1-cb8a3b3a1446',
    transactionLast: false,
    type: 'text',
  },
}

const imageMessage = {
  type: 'message',
  payload: {
    body: {
      description: 'Plaatje',
      isZoomable: false,
      type: 'image',
      url: 'https://developers.seamly.ai/clients/web-ui/static/photos/image-square-small.jpg',
    },
    fromClient: false,
    fromHistory: true,
    id: 'b44ef42c-880c-43ff-b067-499e7f2e81f7',
    messageStatus: 'read',
    participant: 'agent',
    service: {
      meta: { additions: { hideFeedback: 'true' } },
      name: 'bot',
      serviceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35',
    },
    transactionId: 'd0cc13da-337a-4108-9db1-cb8a3b3a1446',
    transactionLast: false,
    type: 'image',
  },
}

const imageMessageWithLightbox = {
  type: 'message',
  payload: {
    body: {
      description: 'Plaatje',
      isZoomable: true,
      type: 'image',
      url: 'https://developers.seamly.ai/clients/web-ui/static/photos/image-portrait.jpg',
    },
    fromClient: false,
    fromHistory: true,
    id: 'b44ef42c-880c-43ff-b067-499e7f2e81f8',
    messageStatus: 'read',
    participant: 'agent',
    service: {
      meta: { additions: { hideFeedback: 'true' } },
      name: 'bot',
      serviceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35',
    },
    transactionId: 'd0cc13da-337a-4108-9db1-cb8a3b3a1446',
    transactionLast: false,
    type: 'image',
  },
}

const videoMessage = {
  type: 'message',
  payload: {
    body: {
      description: 'test',
      source: 'youtube',
      type: 'video',
      url: 'https://www.youtube.com/embed/K7Hn1rPQouU',
    },
    fromClient: false,
    fromHistory: true,
    id: randomId(),
    messageStatus: 'read',
    participant: 'agent',
    service: {
      meta: { additions: { hideFeedback: 'true' } },
      name: 'bot',
      serviceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35',
    },
    transactionId: 'd0cc13da-337a-4108-9db1-cb8a3b3a1446',
    transactionLast: false,
    type: 'video',
  },
}

const choicePromptMessage = {
  type: 'message',
  payload: {
    body: {
      choices: [
        {
          id: '703db9b3-2157-4d4a-9f9b-c382c6a10531',
          text: 'Dialog (this is intentionally made longer for testing purposes)',
          type: 'choice',
        },
        {
          id: '1eff6098-f14f-4683-a2b8-30d1c573d45e',
          text: 'T-Dialog',
          type: 'choice',
        },
        {
          id: 'a8ba3ce8-3324-4e7a-accc-944ff78ac890',
          text: 'Customers',
          type: 'choice',
        },
        {
          id: 'c89956ab-cf98-4b7e-9282-7087c988153d',
          text: 'Features',
          type: 'choice',
        },
        {
          id: '9fd9a28f-462d-4f07-9661-606dbe3b9466',
          category: 'secondary',
          text: 'Something else',
          type: 'choice',
        },
      ],
      chooseAgain: true,
      prompt: {
        text: 'Here are some choice prompt options to choose from',
        type: 'text',
        variables: {},
      },
      type: 'choice_prompt',
    },
    fromClient: false,
    fromHistory: true,
    id: randomId(),
    messageStatus: 'read',
    participant: 'agent',
    service: {
      meta: { additions: {} },
      name: 'bot',
      serviceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35',
    },
    transactionId: 'b947b684-93df-4bd9-a8ea-e2f1b5a7a480',
    transactionLast: true,
    type: 'choice_prompt',
  },
}

const userMessage = {
  type: 'message',
  payload: {
    body: {
      text: 'This is what the user typed',
      type: 'text',
    },
    fromClient: true,
    fromHistory: true,
    id: randomId(),
    messageStatus: 'read',
    participant: 'user',
    transactionId: '1cdefea9-7437-4672-bcf8-2c75dc99244c',
    transactionLast: null,
    type: 'text',
  },
}

const userMessageLong = {
  type: 'message',
  payload: {
    body: {
      text: 'This is what the user typed. And sometimes the user has quite a lot to say and then we get longer lines that need to wrap well and not break the styling so here goes with just such a line right here!!',
      type: 'text',
    },
    fromClient: true,
    fromHistory: true,
    id: randomId(),
    messageStatus: 'read',
    participant: 'user',
    transactionId: '1cdefea9-7437-4672-bcf8-2c75dc99244c',
    transactionLast: null,
    type: 'text',
  },
}
const userMessageWithLinks = {
  type: 'message',
  payload: {
    body: {
      text: '<a href="https://google.com" data-link-id="1">Link in same window</a> and <a href="https://google.com" data-link-id="2" target="_blank">link in new window</a> embedded in text',
      type: 'text',
    },
    fromClient: true,
    fromHistory: true,
    id: randomId(),
    messageStatus: 'read',
    participant: 'user',
    transactionId: '1cdefea9-7437-4672-bcf8-2c75dc99244c',
    transactionLast: null,
    type: 'text',
  },
}

const messageBodyUploadId = {
  type: 'upload',
  transactionId: randomId(),
  meta: {},
  body: {
    contentType: 'plain/text',
    filename: 'This-is-an-example.txt',
    filesize: 12,
    id: randomId(),
    isDeleted: false,
  },
}

const messageBodyUploadUrl = {
  type: 'upload',
  transactionId: randomId(),
  meta: {},
  body: {
    contentType: 'application/pdf',
    filename: 'This-is-a-sample.pdf',
    filesize: 18810,
    id: '',
    isDeleted: false,
    url: 'https://pdfobject.com/pdf/sample.pdf',
  },
}

const messageBodyUploadImage = {
  type: 'upload',
  transactionId: randomId(),
  meta: {},
  body: {
    contentType: 'image/jpeg',
    filename: 'image-square-small.jpg',
    filesize: 12020,
    id: '',
    isDeleted: false,
    url: 'https://developers.seamly.ai/clients/web-ui/static/photos/image-square-small.jpg',
  },
}

const fileDownloadAgentMessageById = {
  type: 'message',
  payload: {
    ...messageBodyUploadId,
    fromClient: false,
    participant: 'agent',
    id: randomId(),
  },
}

const fileDownloadAgentMessageByUrl = {
  type: 'message',
  payload: {
    ...messageBodyUploadUrl,
    fromClient: false,
    participant: 'agent',
    id: randomId(),
  },
}

const fileDownloadAgentMessageImage = {
  type: 'message',
  payload: {
    ...messageBodyUploadImage,
    fromClient: false,
    participant: 'agent',
    id: randomId(),
  },
}

sessionStorage.setItem(
  `image-${fileDownloadAgentMessageImage.payload.id}`,
  fileDownloadAgentMessageImage.payload.body.url,
)

const deletedFileDownloadAgentMessage = {
  ...fileDownloadAgentMessageImage,
  payload: {
    ...fileDownloadAgentMessageImage.payload,
    body: {
      ...fileDownloadAgentMessageImage.payload.body,
      isDeleted: true,
      url: undefined,
    },
    id: randomId(),
  },
}

const fileDownloadUserMessageImage = {
  type: 'message',
  payload: {
    ...messageBodyUploadImage,
    fromClient: true,
    participant: 'user',
    id: randomId(),
  },
}

sessionStorage.setItem(
  `image-${fileDownloadUserMessageImage.payload.id}`,
  fileDownloadUserMessageImage.payload.body.url,
)

const emptyUrlFileDownloadUserMessage = {
  ...fileDownloadUserMessageImage,
  payload: {
    ...fileDownloadUserMessageImage.payload,
    id: randomId(),
    body: {
      ...fileDownloadUserMessageImage.payload.body,
      url: null,
    },
  },
}

const uploadBusy = {
  id: '_2olggurqhb4',
  name: 'gGeyr3WepujbGn7khx.gif',
  progress: 29,
  uploading: true,
  complete: false,
  error: '',
  uploadHandle: {
    abort: () => {
      // do nothing
    },
  },
}

const uploadError = {
  id: '_2olggurqhb4',
  name: 'gGeyr3WepujbGn7khx.gif',
  progress: 0,
  uploading: false,
  complete: false,
  error: 'Something went wrong with the upload',
  uploadHandle: {
    abort: () => undefined,
  },
}

const translationsSlice = {
  isActive: false,
  currentLocale: undefined,
  isAvailable: false,
  showTranslationProposal: false,
  languages: [],
  translatedEventGroups: {},
  containerId: randomId(),
}

const suggestions = [
  {
    id: '1',
    question: 'Invoices',
    categories: ['mixed', 'short'],
  },
  {
    id: '2',
    question: 'Temporary subscription pause',
    categories: ['mixed', 'medium'],
  },
  {
    id: '3',
    question: 'Cancellation',
    categories: ['mixed', 'short'],
  },
  {
    id: '4',
    question: 'Apps',
    categories: ['mixed', 'medium'],
  },
  {
    id: '5',
    question: 'At what date will my subscription end?',
    categories: ['mixed', 'long'],
  },
  {
    id: 'A',
    question: 'Quotes',
    categories: ['short'],
  },
  {
    id: 'B',
    question: 'How to get in touch with us',
    categories: ['long'],
  },
]

const categoryKeys = {
  unstarted: 'unstarted',
  messages: 'messages',
  errors: 'errors',
  uploads: 'uploads',
  features: 'features',
  options: 'options',
  suggestions: 'suggestions',
  minimizedWindow: 'minimizedWindow',
  minimizedInline: 'minimizedInline',
  translations: 'translations',
}

export const categories = {
  [categoryKeys.unstarted]: {
    heading: 'Unstarted UI',
    description: 'Test the loader here',
  },
  [categoryKeys.messages]: {
    heading: 'Messages',
    description: '',
  },
  [categoryKeys.errors]: {
    heading: 'UI errors',
    description: '',
  },
  [categoryKeys.uploads]: {
    heading: 'File uploads',
    description: '',
  },
  [categoryKeys.features]: {
    heading: 'Other features',
    description: '',
  },
  [categoryKeys.options]: {
    heading: 'Options',
    description: '',
  },
  [categoryKeys.suggestions]: {
    heading: 'Suggestions',
    description: '',
  },
  [categoryKeys.minimizedWindow]: {
    heading: 'Minimized window',
    desciption: '',
  },
  [categoryKeys.minimizedInline]: {
    heading: 'Minimized Inline',
    description: '',
  },
  [categoryKeys.translations]: {
    heading: 'Translations',
    description: '',
  },
}

const cardAskText = {
  type: 'message',
  payload: {
    type: 'card',
    id: randomId(),
    body: {
      action: {
        ask: '',
        type: 'ask',
      },
      buttonText: 'Ask about pizzas!',
      description:
        'Pizza Margherita is a <strong>typical Neapolitan pizza</strong>.\n\nIt is made with San Marzano tomatoes, mozzarella cheese, fresh basil, salt, and extra-virgin olive oil.',
      image:
        'https://developers.seamly.ai/clients/web-ui/static/photos/card-square.jpg',
      title: 'Pizza Margherita',
    },
  },
}
const cardNavigate = {
  type: 'message',
  payload: {
    type: 'card',
    id: randomId(),
    body: {
      action: {
        link: 'https://seamly.ai',
        newTab: true,
        type: 'navigate',
      },
      buttonText: 'Order now!',
      description:
        'Pizza Margherita is a <strong>typical Neapolitan pizza</strong>.',
      image:
        'https://developers.seamly.ai/clients/web-ui/static/photos/card-landscape.jpg',
      title: 'Pizza Margherita',
    },
  },
}
const cardTopic = {
  type: 'message',
  payload: {
    type: 'card',
    id: randomId(),
    body: {
      action: {
        topic: 'Set topic',
        type: 'topic',
      },
      buttonText: 'Set topic! (title & description optional)',
      image:
        'https://developers.seamly.ai/clients/web-ui/static/photos/card-portrait.jpg',
    },
  },
}
const cardNoImage = {
  type: 'message',
  payload: {
    type: 'card',
    id: randomId(),
    body: {
      action: {
        ask: '',
        type: 'ask',
      },
      buttonText: 'Ask about pizzas!',
      description:
        'Pizza Margherita is a <strong>typical Neapolitan pizza</strong>.\n\nIt is made with San Marzano tomatoes, mozzarella cheese, fresh basil, salt, and extra-virgin olive oil.',
      title: 'Pizza Margherita',
    },
  },
}

const standardState = {
  base: {
    category: categoryKeys.unstarted,
    headingText: 'Standard with loader',
    description: '',
    ...baseState,
    isLoading: true,
  },
  fullConversation: {
    category: categoryKeys.messages,
    headingText: 'Full demo conversation',
    description: '',
    ...baseState,
    participantInfo,
    serviceInfo: {
      activeServiceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35',
    },
    events: [
      participantMessage,
      infoMessage,
      shortTextMessage,
      {
        ...choicePromptMessage,
        payload: {
          ...choicePromptMessage.payload,
          id: `${choicePromptMessage.payload.id}XXX`,
        },
      },
      longTextMessage,
      participantTransferMessage,
      userMessage,
      textMessageBoldItalicUnderline,
      userMessageWithLinks,
      newTopicDivider,
      imageMessage,
      fileDownloadAgentMessageById,
      fileDownloadAgentMessageByUrl,
      fileDownloadAgentMessageImage,
      deletedFileDownloadAgentMessage,
      userMessageLong,
      videoMessage,
      textMessageWithLinks,
      textMessageWithLongLink,
      imageMessageWithLightbox,
      fileDownloadUserMessageImage,
      emptyUrlFileDownloadUserMessage,
      textMesageWithBullets,
      textMesageWithOrderedList,
      choicePromptMessage,
    ],
  },
  userMessages: {
    category: categoryKeys.messages,
    headingText: 'User messages',
    description: '',
    ...baseState,
    participantInfo,
    events: [
      userMessage,
      userMessageLong,
      fileDownloadUserMessageImage,
      emptyUrlFileDownloadUserMessage,
      userMessageWithLinks,
    ],
  },
  withParticipants: {
    category: categoryKeys.messages,
    headingText: 'Messages with participant info',
    description: '',
    ...baseState,
    config: {
      ...baseState.config,
      overrideMessages: {
        agent: { showAvatar: true, showName: true },
        user: { showName: true, showAvatar: true },
      },
    },
    participantInfo,
    events: [shortTextMessage, userMessage, longTextMessage, userMessageLong],
  },
  textMessages: {
    category: categoryKeys.messages,
    headingText: 'Text messages',
    description: '',
    ...baseState,
    participantInfo,
    events: [
      shortTextMessage,
      longTextMessage,
      textMessageBoldItalicUnderline,
      textMessageWithLinks,
      textMessageWithLongLink,
      textMesageWithBullets,
      textMesageWithOrderedList,
    ],
  },
  imageVideoMessages: {
    category: categoryKeys.messages,
    headingText: 'Download, image and video messages',
    description: '',
    ...baseState,
    participantInfo,
    events: [
      imageMessage,
      videoMessage,
      imageMessageWithLightbox,
      fileDownloadAgentMessageById,
      fileDownloadAgentMessageByUrl,
      fileDownloadAgentMessageImage,
      deletedFileDownloadAgentMessage,
      fileDownloadUserMessageImage,
      emptyUrlFileDownloadUserMessage,
    ],
  },
  systemMessages: {
    category: categoryKeys.messages,
    headingText: 'System messages',
    description: '',
    ...baseState,
    config: {
      overrideMessages: {
        timeIndicator: {
          enabled: true,
          threshold: 3600000,
        },
      },
    },
    participantInfo,
    events: [
      {
        type: 'message',
        payload: {
          ...shortTextMessage.payload,
          occurredAt: (Date.now() - 86400000 * 5) * 1000,
          id: randomId(),
          body: {
            text: 'Long ago when a dialog started',
            type: 'text',
          },
        },
      },
      participantMessage,
      participantMessageDefaultIcon,
      participantTransferMessage,
      newTopicDivider,
      transcriptInfoMessage,
      ...[newTranslationDividerStart, newTranslationDividerStop].map(
        addTranslationData,
      ),
      infoMessage,
    ],
  },
  choicePromptMessages: {
    category: categoryKeys.messages,
    headingText: 'Choice prompt messages',
    description: '',
    ...baseState,
    participantInfo,
    serviceInfo: {
      activeServiceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35',
    },
    events: [
      {
        ...choicePromptMessage,
        payload: {
          ...choicePromptMessage.payload,
          id: `${choicePromptMessage.payload.id}XXX`,
        },
      },
      shortTextMessage,
      choicePromptMessage,
    ],
  },
  choicePromptMessageWithoutManualInput: {
    category: categoryKeys.messages,
    headingText: 'Choice prompt message without manual input',
    description: '',
    ...baseState,
    entryMeta: {
      ...baseState.entryMeta,
      options: {
        text: {
          allowManualInput: false,
        },
      },
    },
    events: [choicePromptMessage],
    participantInfo,
    serviceInfo: {
      activeServiceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35',
    },
  },
  timeIndicators: {
    category: categoryKeys.messages,
    headingText: 'Time Indicators',
    description: '',
    ...baseState,
    config: {
      overrideMessages: {
        timeIndicator: {
          enabled: true,
          threshold: 3600000,
        },
      },
    },
    participantInfo,
    serviceInfo: {
      activeServiceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35',
    },
    events: [
      {
        type: 'message',
        payload: {
          ...shortTextMessage.payload,
          occurredAt: (Date.now() - 86400000 * 5) * 1000,
          id: randomId(),
          body: {
            text: 'Long ago when a dialog started',
            type: 'text',
          },
        },
      },
      {
        type: 'message',
        payload: {
          ...shortTextMessage.payload,
          occurredAt: (Date.now() - 86400000 * 4) * 1000,
          id: randomId(),
          body: {
            text: 'Above me should be a time indicator showing the full date',
            type: 'text',
          },
        },
      },
      {
        type: 'message',
        payload: {
          ...shortTextMessage.payload,
          occurredAt: (Date.now() + 1 - 86400000 * 4) * 1000,
          id: randomId(),
          body: {
            text: 'Another message',
            type: 'text',
          },
        },
      },
      {
        type: 'message',
        payload: {
          ...shortTextMessage.payload,
          occurredAt: (Date.now() + 2 - 86400000 * 4) * 1000,
          id: randomId(),
          body: {
            text: 'And another message',
            type: 'text',
          },
        },
      },
      {
        type: 'message',
        payload: {
          ...shortTextMessage.payload,
          occurredAt: (Date.now() - 86400000) * 1000,
          id: randomId(),
          body: {
            text: 'Above me should be a time indicator showing "yesterday"',
            type: 'text',
          },
        },
      },
      {
        type: 'message',
        payload: {
          ...shortTextMessage.payload,
          occurredAt: (Date.now() + 1 - 86400000) * 1000,
          id: randomId(),
          body: {
            text: 'Another message',
            type: 'text',
          },
        },
      },
      {
        type: 'message',
        payload: {
          ...shortTextMessage.payload,
          occurredAt: (Date.now() + 2 - 86400000) * 1000,
          id: randomId(),
          body: {
            text: 'And another message',
            type: 'text',
          },
        },
      },
      {
        type: 'message',
        payload: {
          ...shortTextMessage.payload,
          occurredAt: Date.now() * 1000,
          id: randomId(),
          body: {
            text: 'Above me should be a time indicator showing me the dialog continues today',
            type: 'text',
          },
        },
      },
    ],
  },
  cards: {
    category: categoryKeys.messages,
    headingText: 'Cards',
    description: '',
    ...baseState,
    serviceInfo: {
      activeServiceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35',
    },
    events: [cardAskText, cardNavigate, cardTopic, cardNoImage],
  },
  carousel: {
    category: categoryKeys.messages,
    headingText: 'Carousel',
    description: '',
    ...baseState,
    serviceInfo: {
      activeServiceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35',
    },
    events: [
      {
        type: 'message',
        payload: {
          type: 'carousel',
          id: randomId(),
          body: {
            cards: [
              cardAskText.payload.body,
              cardNavigate.payload.body,
              cardTopic.payload.body,
              cardNoImage.payload.body,
            ],
          },
        },
      },
    ],
  },
  errorWithAction: {
    // Important: This cannot pick up the language files so the text is hard set here.
    category: categoryKeys.errors,
    headingText: 'Error with a user action',
    description: '',
    ...baseState,
    interrupt: {
      error: new SeamlyGeneralError(new Error('general error')),
    },
  },
  errorWithoutAction: {
    // Important: This cannot pick up the language files so the text is hard set here.
    category: categoryKeys.errors,
    headingText: 'Error without a user action',
    description: '',
    ...baseState,
    interrupt: {
      error: new SeamlyOfflineError(new Error('seamly offline error')),
    },
  },
  privacyDisclaimer: {
    category: categoryKeys.features,
    headingText: 'Privacy disclaimer',
    description: '',
    ...baseState,
    config: {
      ...baseState.config,
      showDisclaimer: true,
    },
  },
  characterLimit: {
    category: categoryKeys.features,
    headingText: 'Singleline: Input character limit',
    description: '',
    ...baseState,
    entryMeta: {
      default: 'text',
      active: 'text',
      userSelected: null,
      options: {
        text: {
          limit: 120,
        },
      },
      optionsOverride: {},
    },
  },
  inputLabel: {
    category: categoryKeys.features,
    headingText: 'Singleline: Input label',
    ...baseState,
    entryMeta: {
      default: 'text',
      active: 'text',
      options: {
        text: { limit: null },
      },
      optionsOverride: {
        text: {
          label: 'What is your name?',
          limit: null,
          placeholder: 'Please enter your name',
        },
      },
    },
  },
  inputLabelWithFileUploadToggle: {
    category: categoryKeys.features,
    headingText: 'Singleline: Input label with file upload toggle button',
    ...baseState,
    options: {
      ...baseState.options,
      features: { uploads: { enabled: true } },
    },
    entryMeta: {
      default: 'text',
      active: 'text',
      options: {
        text: { limit: null },
      },
      optionsOverride: {
        text: {
          label: 'What is the title of the uploaded document?',
          limit: null,
          placeholder: 'Please enter the title of the document',
        },
      },
    },
  },
  multilineCharacterLimit: {
    category: categoryKeys.features,
    headingText: 'Multiline: Input character limit',
    description: '',
    ...baseState,
    config: {
      ...baseState.config,
      useMultilineUserInput: true,
    },
    entryMeta: {
      default: 'text',
      active: 'text',
      userSelected: null,
      options: {
        text: {
          limit: 120,
        },
      },
      optionsOverride: {},
    },
  },
  multilineInputLabel: {
    category: categoryKeys.features,
    headingText: 'Multiline: Input label',
    ...baseState,
    config: {
      ...baseState.config,
      useMultilineUserInput: true,
    },
    entryMeta: {
      default: 'text',
      active: 'text',
      options: {
        text: { limit: null },
      },
      optionsOverride: {
        text: {
          label: 'What is your name?',
          limit: null,
          placeholder: 'Please enter your name',
        },
      },
    },
  },
  multilineInputLabelWithFileUploadToggle: {
    category: categoryKeys.features,
    headingText: 'Multiline: Input label with file upload toggle button',
    ...baseState,
    config: {
      ...baseState.config,
      useMultilineUserInput: true,
    },
    options: {
      ...baseState.options,
      features: { uploads: { enabled: true } },
    },
    entryMeta: {
      default: 'text',
      active: 'text',
      options: {
        text: { limit: null },
      },
      optionsOverride: {
        text: {
          label: 'What is the title of the uploaded document?',
          limit: null,
          placeholder: 'Please enter the title of the document',
        },
      },
    },
  },
  abortTransactional: {
    category: categoryKeys.features,
    headingText: 'Abort transaction',
    ...baseState,
    events: [shortTextMessage, userMessage],
    entryMeta: {
      default: 'text',
      active: 'text',
      options: {
        text: { limit: null },
      },
      optionsOverride: {},
      actions: {
        abortTransaction: {
          label: 'Ask for another question',
          topicFallbackMessage: 'Oops...',
          topicName: 'abort_transaction',
        },
      },
      translatedActions: {},
    },
  },
  fileUploadToggle: {
    category: categoryKeys.uploads,
    headingText: 'File upload toggle button',
    description: '',
    ...baseState,
    options: {
      ...baseState.options,
      features: { uploads: { enabled: true } },
    },
  },
  fileUploadToggleHidden: {
    category: categoryKeys.uploads,
    headingText: 'File upload toggle button hidden',
    description: '',
    ...baseState,
    options: {
      ...baseState.options,
      features: { uploads: { enabled: false } },
    },
  },
  fileUploadInput: {
    category: categoryKeys.uploads,
    headingText: 'File upload input',
    description: 'Click on upload button to see an error',
    styleGuideReset: true,
    ...baseState,
    config: {
      ...baseState.config,
      accountConfig: { features: { uploads: true } },
    },
    options: {
      ...baseState.options,
      features: { uploads: { enabled: true } },
    },
    entryMeta: {
      default: 'text',
      active: 'text',
      userSelected: 'upload',
      options: {
        upload: {
          allowedMimeTypes: ['image/*', 'application/pdf'],
          maxSize: 10485760,
        },
      },
      optionsOverride: {},
    },
  },
  fileUploadBusy: {
    category: categoryKeys.uploads,
    headingText: 'File upload in progress',
    description: '',
    styleGuideReset: true,
    ...baseState,
    config: {
      ...baseState.config,
      accountConfig: { features: { uploads: true } },
    },
    options: {
      ...baseState.options,
      features: { uploads: { enabled: true } },
    },
    entryMeta: {
      default: 'text',
      active: 'text',
      userSelected: 'upload',
      options: {
        upload: {
          allowedMimeTypes: ['image/*', 'application/pdf'],
          maxSize: 10485760,
        },
      },
      optionsOverride: {},
    },
    currentUploads: [uploadBusy],
  },
  fileUploadError: {
    category: categoryKeys.uploads,
    headingText: 'File upload errored',
    description: '',
    styleGuideReset: true,
    ...baseState,
    config: {
      ...baseState.config,
      accountConfig: { features: { uploads: true } },
    },
    options: {
      ...baseState.options,
      features: { uploads: { enabled: true } },
    },
    entryMeta: {
      default: 'text',
      active: 'text',
      userSelected: 'upload',
      options: {
        upload: {
          allowedMimeTypes: ['image/*', 'application/pdf'],
          maxSize: 10485760,
        },
      },
      optionsOverride: {},
    },
    currentUploads: [uploadError],
  },
  idleTimerCountdown: {
    category: categoryKeys.features,
    headingText: 'Idle timer with countdown',
    description: '',
    ...baseState,
    idleDetachCountdown: {
      hasCountdown: true,
      isActive: true,
      count: 120,
      remaining: 91,
      timer: { minutes: 1, seconds: 31 },
    },
  },
  idleTimerNoCountdown: {
    category: categoryKeys.features,
    headingText: 'Idle timer without countdown',
    description: '',
    ...baseState,
    idleDetachCountdown: {
      hasCountdown: true,
      isActive: false,
      count: 120,
      remaining: 91,
      timer: { minutes: 1, seconds: 31 },
    },
  },
  resumeConversationPrompt: {
    category: categoryKeys.features,
    headingText: 'Resume conversation prompt',
    description: '',
    ...baseState,
    participantInfo,
    resumeConversationPrompt: true,
  },
  optionsSingleTriggerAvailable: {
    category: categoryKeys.options,
    headingText: 'Single option available',
    description: '',
    ...baseState,
    options: {
      ...baseState.options,
      features: { sendTranscript: { enabled: true } },
    },
  },
  optionsSingleTriggerUnavailable: {
    category: categoryKeys.options,
    headingText: 'Single option',
    description: 'Option unavailable',
    ...baseState,
    options: {
      ...baseState.options,
      features: { sendTranscript: { enabled: false } },
    },
  },
  optionsMultiple: {
    category: categoryKeys.options,
    headingText: 'Multiple options',
    description: 'All options available',
    ...baseState,
    options: {
      ...baseState.options,
      features: {
        extraMenuItem: { enabled: true },
        sendTranscript: { enabled: true },
      },
    },
  },
  optionsMultipleUnavailable: {
    category: categoryKeys.options,
    headingText: 'Multiple options',
    description: 'Some unavailable',
    ...baseState,
    options: {
      ...baseState.options,
      features: {
        extraMenuItem: { enabled: false },
        sendTranscript: { enabled: true },
      },
    },
  },
  optionSendTranscript: {
    category: categoryKeys.options,
    headingText: 'Send transcript option',
    description: 'Press submit to view error message',
    ...baseState,
    options: {
      ...baseState.options,
      optionActive: 'sendTranscript',
      panelActive: true,
      features: {
        sendTranscript: { enabled: true },
      },
    },
  },
  translationsAvailable: {
    category: categoryKeys.translations,
    headingText: 'Show translations available',
    description: '',
    ...baseState,
    translations: {
      ...translationsSlice,
      isAvailable: true,
      languages: [
        { locale: 'nl', nativeName: 'Dutch' },
        { locale: 'en', nativeName: 'English' },
      ],
    },
  },
  translationsAvailableWithOptions: {
    category: categoryKeys.translations,
    headingText: 'Show translations available with other options available',
    description: '',
    ...baseState,
    options: {
      ...baseState.options,
      features: {
        sendTranscript: { enabled: true },
      },
    },
    config: {
      ...baseState.config,
      context: {
        ...baseState.context,
        contentLocale: 'nl',
        userLocale: 'en',
      },
    },
    translations: {
      ...translationsSlice,
      isAvailable: true,
      currentLocale: 'lv',
      isActive: true,
      languages: [
        { locale: 'nl', nativeName: 'Dutch' },
        { locale: 'en', nativeName: 'English' },
        { locale: 'ar', nativeName: 'Arabic' },
        { locale: 'bg', nativeName: 'Bulgarian' },
        { locale: 'zh', nativeName: 'Chinese' },
        { locale: 'cs', nativeName: 'Czech' },
        { locale: 'da', nativeName: 'Danish' },
        { locale: 'et', nativeName: 'Estonian' },
        { locale: 'fi', nativeName: 'Finnish' },
        { locale: 'fr', nativeName: 'French' },
        { locale: 'de-informal', nativeName: 'German' },
        { locale: 'el', nativeName: 'Greek' },
        { locale: 'hu', nativeName: 'Hungarian' },
        { locale: 'it', nativeName: 'Italian' },
        { locale: 'ja', nativeName: 'Japanese' },
        { locale: 'lv', nativeName: 'Latvian' },
        { locale: 'pl', nativeName: 'Polish' },
        { locale: 'ro', nativeName: 'Romanian' },
        { locale: 'ru', nativeName: 'Russian' },
        { locale: 'sk', nativeName: 'Slovak' },
        { locale: 'sl', nativeName: 'Slovenian' },
        { locale: 'es-informal', nativeName: 'Spanish' },
        { locale: 'sv', nativeName: 'Swedish' },
        { locale: 'ti', nativeName: 'Tigrinya' },
        { locale: 'tr', nativeName: 'Turkish' },
        { locale: 'uk', nativeName: 'Ukrainian' },
      ],
    },
  },
  translationsActive: {
    category: categoryKeys.translations,
    headingText: 'Show translations active',
    description: '',
    ...baseState,
    translations: {
      ...translationsSlice,
      currentLocale: 'nl',
      isActive: true,
      isAvailable: true,
      languages: [
        { locale: 'nl', nativeName: 'Dutch' },
        { locale: 'en', nativeName: 'English' },
      ],
    },
  },
  translationsActiveLarge: {
    category: categoryKeys.translations,
    headingText: 'Show translations active (large list)',
    description: '',
    ...baseState,
    config: {
      ...baseState.config,
      context: {
        ...baseState.context,
        contentLocale: 'nl',
        userLocale: 'en',
      },
    },
    translations: {
      ...translationsSlice,
      currentLocale: 'lv',
      isActive: true,
      isAvailable: true,
      languages: [
        { locale: 'nl', nativeName: 'Dutch' },
        { locale: 'en', nativeName: 'English' },
        { locale: 'ar', nativeName: 'Arabic' },
        { locale: 'bg', nativeName: 'Bulgarian' },
        { locale: 'zh', nativeName: 'Chinese' },
        { locale: 'cs', nativeName: 'Czech' },
        { locale: 'da', nativeName: 'Danish' },
        { locale: 'et', nativeName: 'Estonian' },
        { locale: 'fi', nativeName: 'Finnish' },
        { locale: 'fr', nativeName: 'French' },
        { locale: 'de-informal', nativeName: 'German' },
        { locale: 'el', nativeName: 'Greek' },
        { locale: 'hu', nativeName: 'Hungarian' },
        { locale: 'it', nativeName: 'Italian' },
        { locale: 'ja', nativeName: 'Japanese' },
        { locale: 'lv', nativeName: 'Latvian' },
        { locale: 'pl', nativeName: 'Polish' },
        { locale: 'ro', nativeName: 'Romanian' },
        { locale: 'ru', nativeName: 'Russian' },
        { locale: 'sk', nativeName: 'Slovak' },
        { locale: 'sl', nativeName: 'Slovenian' },
        { locale: 'es-informal', nativeName: 'Spanish' },
        { locale: 'sv', nativeName: 'Swedish' },
        { locale: 'ti', nativeName: 'Tigrinya' },
        { locale: 'tr', nativeName: 'Turkish' },
        { locale: 'uk', nativeName: 'Ukrainian' },
      ],
    },
  },
  translationsFullConversation: {
    category: categoryKeys.translations,
    headingText: 'Show translated messages',
    description: '',
    ...baseState,
    participantInfo,
    serviceInfo: {
      activeServiceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35',
    },
    events: [
      newTranslationDividerStart,
      infoMessage,
      shortTextMessage,
      {
        ...choicePromptMessage,
        payload: {
          ...choicePromptMessage.payload,
          id: `${choicePromptMessage.payload.id}XXX`,
        },
      },
      longTextMessage,
      userMessage,
      textMessageBoldItalicUnderline,
      newTopicDivider,
      newTranslationDividerStartTwo,
      newTranslationDividerStop,
      imageMessage,
      fileDownloadAgentMessageById,
      fileDownloadAgentMessageByUrl,
      fileDownloadAgentMessageImage,
      deletedFileDownloadAgentMessage,
      userMessageLong,
      videoMessage,
      textMessageWithLinks,
      textMessageWithLongLink,
      imageMessageWithLightbox,
      fileDownloadUserMessageImage,
      emptyUrlFileDownloadUserMessage,
      textMesageWithBullets,
      textMesageWithOrderedList,
      choicePromptMessage,
      newTranslationDividerStop,
    ].map(addTranslationData),
    translations: {
      ...translationsSlice,
      currentLocale: 'nl',
      isActive: true,
      isAvailable: true,
      translatedEventGroups: {
        [newTranslationDividerStart.payload.id]: [
          infoMessage,
          shortTextMessage,
          {
            ...choicePromptMessage,
            payload: {
              ...choicePromptMessage.payload,
              id: `${choicePromptMessage.payload.id}XXX`,
            },
          },
          longTextMessage,
          userMessage,
          textMessageBoldItalicUnderline,
          newTopicDivider,
        ].map((p) => p.payload.id),
        [newTranslationDividerStartTwo.payload.id]: [
          imageMessage,
          fileDownloadAgentMessageById,
          fileDownloadAgentMessageByUrl,
          fileDownloadAgentMessageImage,
          deletedFileDownloadAgentMessage,
          userMessageLong,
          videoMessage,
          textMessageWithLinks,
          textMessageWithLongLink,
          imageMessageWithLightbox,
          fileDownloadUserMessageImage,
          emptyUrlFileDownloadUserMessage,
          textMesageWithBullets,
          textMesageWithOrderedList,
          choicePromptMessage,
        ].map((p) => p.payload.id),
      },
      languages: [
        { locale: 'nl', nativeName: 'Dutch' },
        { locale: 'en', nativeName: 'English' },
      ],
    },
  },
  translationProposal: {
    category: categoryKeys.translations,
    headingText: 'Show translation proposal',
    description: '',
    ...baseState,
    events: [shortTextMessage, userMessage, userMessageLong],
    config: {
      ...baseState.config,
      showDisclaimer: true,
      context: {
        contentLocale: 'nl-informal',
        userLocale: 'en-GB',
      },
    },
    translations: {
      ...translationsSlice,
      translationProposal: {
        buttonLabel: 'Activate',
        proposedLocale: 'en-GB',
        srDismissButtonText: 'Dismiss translation proposal',
        titleLabel: 'Do you want to chat in English?',
      },
      isAvailable: true,
      isActive: false,
      languages: [
        { locale: 'nl-informal', nativeName: 'Dutch' },
        { locale: 'en-GB', nativeName: 'English' },
      ],
    },
  },
  translationProposalWithoutTitle: {
    category: categoryKeys.translations,
    headingText: 'Show translation proposal without title',
    description: '',
    ...baseState,
    events: [shortTextMessage, userMessage, userMessageLong],
    config: {
      ...baseState.config,
      showDisclaimer: true,
      context: {
        contentLocale: 'nl-informal',
        userLocale: 'en-GB',
      },
    },
    translations: {
      ...translationsSlice,
      translationProposal: {
        buttonLabel: 'Activate',
        proposedLocale: 'en-GB',
        srDismissButtonText: 'Dismiss translation proposal',
      },
      isAvailable: true,
      isActive: false,
      languages: [
        { locale: 'nl-informal', nativeName: 'Dutch' },
        { locale: 'en-GB', nativeName: 'English' },
      ],
    },
  },
}

const inlineInterface = {
  minimizedInline: {
    category: categoryKeys.minimizedInline,
    headingText: 'Inline minimized',
    description: '',
    inline: {
      ...baseState,
      config: {
        ...baseState.config,
        layoutMode: 'inline',
      },
      visibility: {
        ...baseState.visibility,
        visibility: visibilityStates.minimized,
      },
    },
  },
  minimizedInlineCharacterLimit: {
    category: categoryKeys.minimizedInline,
    headingText: 'Inline minimized with limited characters',
    description: '',
    inline: {
      ...baseState,
      config: {
        ...baseState.config,
        layoutMode: 'inline',
      },
      visibility: {
        ...baseState.visibility,
        visibility: visibilityStates.minimized,
      },
      entryMeta: {
        ...baseState.entryMeta,
        options: {
          text: {
            limit: 120,
          },
        },
      },
    },
  },
  minimizedInlinePrechat: {
    category: categoryKeys.minimizedInline,
    headingText: 'Inline minimized with collapsed chat messages',
    description: '',
    inline: {
      ...baseState,
      config: {
        ...baseState.config,
        layoutMode: 'inline',
        preChatEvents: [splashMessage],
      },
      visibility: {
        ...baseState.visibility,
        visibility: visibilityStates.minimized,
      },
    },
  },
  minimizedInlinePrechatSuggestions: {
    category: categoryKeys.minimizedInline,
    headingText: 'Inline minimized with collapsed chat messages & suggestions',
    description: '',
    inline: {
      ...baseState,
      config: {
        ...baseState.config,
        layoutMode: 'inline',
        preChatEvents: [splashMessage],
      },
      serviceData: {
        suggestion: {
          body: suggestions,
        },
      },
      visibility: {
        ...baseState.visibility,
        visibility: visibilityStates.minimized,
      },
    },
  },
  inlineWithSuggestions: {
    category: categoryKeys.suggestions,
    headingText: 'Suggestions',
    description: '',
    inline: {
      ...baseState,
      config: {
        ...baseState.config,
        layoutMode: 'inline',
      },
      visibility: {
        ...baseState.visibility,
        visibility: visibilityStates.open,
      },
      serviceData: {
        suggestion: {
          body: suggestions,
        },
      },
    },
  },
  minimizedInlineWithError: {
    category: categoryKeys.minimizedInline,
    headingText: 'Inline minimized with error',
    description: '',
    inline: {
      ...baseState,
      config: {
        ...baseState.config,
        layoutMode: 'inline',
      },
      visibility: {
        ...baseState.visibility,
        visibility: visibilityStates.minimized,
      },
      interrupt: {
        error: new SeamlyOfflineError(new Error('seamly offline error')),
      },
    },
  },
}

const standardWindowStates = {
  minimizedWindow: {
    category: categoryKeys.minimizedWindow,
    headingText: 'Unstarted minimized',
    description: '',
    window: {
      ...baseState,
      config: {
        ...baseState.config,
        layoutMode: 'window',
      },
      visibility: {
        ...baseState.visibility,
        visibility: visibilityStates.minimized,
      },
    },
  },
  minimizedWindowStarted: {
    category: categoryKeys.minimizedWindow,
    headingText: 'Started minimized',
    description: '',
    window: {
      ...baseState,
      config: {
        ...baseState.config,
        layoutMode: 'window',
      },
      visibility: {
        ...baseState.visibility,
        visibility: visibilityStates.minimized,
      },
      participantInfo,
      headerTitles,
    },
  },
  minimizedWindowStartedUnread: {
    category: categoryKeys.minimizedWindow,
    headingText: 'Minimized with unread messages',
    description: '',
    window: {
      ...baseState,
      config: { ...baseState.config, layoutMode: 'window' },
      visibility: {
        ...baseState.visibility,
        visibility: visibilityStates.minimized,
      },
      participantInfo,
      headerTitles,
      unreadEvents: 12,
    },
  },
}

const newInterface = {
  suggestionsMessage: {
    category: categoryKeys.messages,
    headingText: 'Suggestions message',
    description: '',
    ...baseState,
    events: [
      getCustomMessage(shortTextMessage.payload.body),
      {
        type: 'service_data',
        payload: {
          type: 'suggestion',
          body: suggestions,
        },
      },
    ],
  },
}

const buildStandardState = (layoutModes, customComponentEventBodies = []) => {
  const intermediateState = {
    ...standardState,
    fullConversation: {
      ...standardState.fullConversation,
      events: [splashMessage, ...standardState.fullConversation.events],
    },
    ...newInterface,
    ...customComponentEventBodies.reduce((acc, eventBody) => {
      const { key, headingText, description, body } = eventBody
      return {
        ...acc,
        [key]: {
          category: categoryKeys.messages,
          headingText,
          description,
          ...baseState,
          participantInfo,
          events: [getCustomMessage(body)],
        },
      }
    }, {}),
  }
  return Object.keys(intermediateState).reduce((acc, key) => {
    const { headingText, category, description, ...rest } =
      intermediateState[key]

    return {
      ...acc,
      [key]: {
        headingText,
        description,
        category,
        ...layoutModes.reduce(
          (comb, layoutMode) => ({
            ...comb,
            [layoutMode]: {
              ...rest,
              config: { ...rest.config, layoutMode },
            },
          }),
          {},
        ),
      },
    }
  }, {})
}

export const getStateObj = (layoutModes, customComponentEventBodies) => {
  return {
    ...buildStandardState(layoutModes, customComponentEventBodies),
    ...(layoutModes.indexOf('window') !== -1
      ? {
          ...standardWindowStates,
          minimizedWindowPrechat: {
            category: categoryKeys.minimizedWindow,
            headingText: 'Minimized with collapsed chat messages',
            description: '',
            window: {
              ...baseState,
              config: {
                ...baseState.config,
                layoutMode: 'window',
                preChatEvents: [splashMessage],
                preChat: true,
              },
              visibility: {
                ...baseState.visibility,
                visibility: visibilityStates.minimized,
              },
              participantInfo,
              headerTitles,
            },
          },
          minimizedWindowPrechatDelayed: {
            category: categoryKeys.minimizedWindow,
            headingText: 'Minimized with delayed collapsed chat messages',
            description: '',
            window: {
              ...baseState,
              config: {
                ...baseState.config,
                layoutMode: 'window',
                preChatEvents: [splashMessage],
                preChat: {
                  enterDelay: 1000,
                  exitAfter: 3000,
                },
              },
              visibility: {
                ...baseState.visibility,
                visibility: visibilityStates.minimized,
              },
              participantInfo,
              headerTitles,
            },
          },
          minimizedWindowPrechatDisabled: {
            category: categoryKeys.minimizedWindow,
            headingText: 'Minimized with disabled collapsed chat messages',
            description: '',
            window: {
              ...baseState,
              config: {
                ...baseState.config,
                layoutMode: 'window',
                preChatEvents: [splashMessage],
                preChat: false,
              },
              visibility: {
                ...baseState.visibility,
                visibility: visibilityStates.minimized,
              },
              participantInfo,
              headerTitles,
            },
          },
        }
      : {}),
    ...inlineInterface,
  }
}