import {
  commonTipsProperty,
  ElementError,
  ElementErrorType,
  getTipIconType,
  tipsMap,
} from '@v-screen/component'
import React from 'react'
import styled from '@emotion/styled'

export const TipsComponent = ({ renderer }) => {
  const {
    fontFamily = commonTipsProperty['fontFamily'],
    fontWeight = commonTipsProperty['fontWeight'],
    fontSize = commonTipsProperty['fontSize'],
    color = commonTipsProperty['color'],
    backgroundColor = commonTipsProperty['backgroundColor'],
  } = renderer.POMNode.properties.tips ?? commonTipsProperty
  const { type, message } = renderer.error ?? new ElementError(ElementErrorType.DataEmpty, 'Please Config Data Bind First')
  const tipIconType = getTipIconType(type, renderer.editMode)

  return (
    <S.Container
      className='element-error-tip'
      fontFamily={fontFamily}
      fontWeight={fontWeight}
      fontSize={fontSize}
      color={color}
      backgroundColor={backgroundColor}
    >
      <S.IconContainer
        id='tip-icon'
        fontSize={fontSize * 4}
        color={color}
      >
        <svg
          width="1em"
          height="1em"
          fill="currentColor"
          viewBox="0 0 105 105"
          xmlns="http://www.w3.org/2000/svg"
          dangerouslySetInnerHTML={{
            __html: tipsMap[tipIconType],
          }}
        />
      </S.IconContainer>
      <S.Content id='tip-content'>
        {message}
      </S.Content>
    </S.Container>
  )
}

const S = {
  Container: styled.div`
    display: flex;
    width: 100%;
    height: 100%;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: ${({ fontFamily }) => fontFamily};
    font-weight: ${({ fontWeight }) => fontWeight};
    font-size: ${({ fontSize }) => fontSize}px;
    color: ${({ color }) => color};
    background-color: ${({ backgroundColor }) => backgroundColor};
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  `,
  Content: styled.div``,
  IconContainer: styled.div`
    line-height: 1;
    font-size: ${({ fontSize }) => fontSize}px;
    color: ${({ color }) => color};
  `,
}