import React, { useMemo } from 'react'

import ReactSimpleChatbot, { Step } from 'react-simple-chatbot'
import styled, { ThemeProvider, css } from 'styled-components/macro'

import { theme, mobileBreakpoint } from 'theme'
import chloe from 'images/chloe.png'
import { transformStep } from 'services/steps-processor'
import { overrides } from 'services/overrides'

interface Props {
  steps: Step[]
  showInput?: boolean
}

const DISABLE_DELAYS = process.env.NODE_ENV !== 'production'

const INPUT_HEIGHT = 51

const makeTheme = ({ colors, sizes, fontFamily }: typeof theme) => ({
  background: colors.background,
  headerBgColor: colors.primary,
  headerFontColor: colors.backgroundLight,
  headerFontSize: sizes.question,
  botBubbleColor: colors.backgroundLight,
  botFontColor: colors.text,
  userBubbleColor: colors.secondaryLight,
  userFontColor: colors.backgroundLight,
  fontFamily,
  colors,
  sizes
})

const WrappedChatbot: React.FC<Props & Record<string, any>> = ({
  showInput,
  ...rest
}) => {
  return <ReactSimpleChatbot {...rest} />
}

const StyledChatbot = styled(WrappedChatbot)`
  height: 100%;
  width: 100%;

  /* Removes shadow around avatar */
  .rsc-ts-bot .rsc-ts-image {
    box-shadow: none;
  }

  .rsc-container {
    box-shadow: none;
    border-radius: 0;
  }

  .rsc-content {
    padding: 15px;
    height: calc(
      100% - ${props => (props.showInput ? INPUT_HEIGHT : 0)}px - 30px
    );
    @media (max-width: ${mobileBreakpoint}px) {
      padding: 10px;
      height: calc(
        100% - ${props => (props.showInput ? INPUT_HEIGHT : 0)}px - 20px
      );
    }
  }

  .rsc-ts-bubble {
    font-size: ${props => props.theme.sizes.question};
    padding: calc(${props => props.theme.sizes.question} * 0.75);
    margin-top: 4px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    @media (max-width: ${mobileBreakpoint}px) {
      max-width: 100%;
    }
  }

  .rsc-cs {
    background: none;
    box-shadow: none;
  }

  .rsc-os {
    display: flex;
    align-items: flex-end;
    flex-grow: 1;
    justify-content: center;
  }

  .rsc-os-options {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 15px;
  }

  .rsc-os-option-element {
    z-index: 1000001;
    -webkit-transform: translateZ(0px);
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-perspective: 1000;
    color: ${props => props.theme.colors.primary};
    font-size: ${props => props.theme.sizes.buttonText};
    font-family: ${props => props.theme.fontFamily};
    padding: calc(${props => props.theme.sizes.buttonText} * 0.75);
    font-weight: 500;
    background: ${props => props.theme.colors.backgroundLight};
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    min-width: 6em;
    margin: 3px;
    cursor: pointer;
    @media (max-width: ${mobileBreakpoint}px) {
      padding: 11px;
      font-size: 14px;
    }
  }

  ${props =>
    !props.showInput &&
    css`
      .rsc-footer {
        display: none;
      }
    `}
`

export const Chatbot: React.FC<Props & Record<string, any>> = ({
  steps,
  ...rest
}) => {
  const transformedSteps = useMemo(() => steps.map(transformStep), [steps])

  return (
    <ThemeProvider theme={makeTheme}>
      <StyledChatbot
        {...rest}
        steps={transformedSteps}
        hideHeader
        hideUserAvatar
        botAvatar={overrides.images.botAvatar || chloe}
        userDelay={DISABLE_DELAYS ? 0 : 400}
        botDelay={DISABLE_DELAYS ? 0 : 400}
        customDelay={DISABLE_DELAYS ? 0 : 400}
        width="100%"
        height="100%"
      />
    </ThemeProvider>
  )
}

export default Chatbot