import React from 'react'
import { backgroundStyle, borderStyles } from '@adalo/constants'
import Section, { SectionProps } from 'components/Section'
import Image from 'components/Image'

export default class LayoutSection<T extends SectionProps> extends Section<T> {
  render() {
    const { object } = this.props
    const { attributes } = object
    const { borderStyle, shadow } = attributes

    const renderAsImage = attributes?.backgroundStyle === backgroundStyle.IMAGE
    const hasNoBackground = attributes?.backgroundStyle === backgroundStyle.NONE
    const RenderComponent: React.ComponentType<T> = renderAsImage
      ? Image
      : Section

    const props = {
      ...this.props,
      object: {
        ...object,
        attributes: {
          ...attributes,
          borderStyle: hasNoBackground ? borderStyles.NONE : borderStyle,
          shadow: hasNoBackground ? { ...shadow, enabled: false } : shadow,
          ...(renderAsImage && {
            backgroundStyle: backgroundStyle.COLOR,
          }),
        },
      },
    }

    return <RenderComponent {...props} />
  }
}