import React, { useEffect, useRef, useState } from "react"
import { AnniversaryDate, AnniversaryImage, Separator } from '..'
import { FormattedText } from "../../../FormattedText"
import { getPhotoUrl, parseBorderMargin, parseParameters } from '../utils'

interface Props {
  anniversary: Anniversary
  data: VixonicData
}

export const ClassicItem: React.FunctionComponent<Props> = ({ anniversary, data }: Props) => {
  let month = anniversary.month
  const cont = useRef(null)
  const { parameters, downloadsPath } = data
  const { orientation, separatorColor, separatorWidth, imageSize } = parameters
  const [margins, setMargins] = useState(parseBorderMargin(parameters.itemMargins))
  const [state, setState] = useState({...parseParameters(parameters)})

  useEffect(() => {
    setMargins(parseBorderMargin(parameters.itemMargins))
    setState({...parseParameters(parameters)})
  }, [])

  const separatorProps = {
    orientation: orientation,
    size: separatorWidth,
    color: separatorColor,
    margins: orientation === "v"
      ? `${margins.r} 0 ${margins.l} 0`
      : `0 ${margins.r} 0 ${margins.l}`,
  }

  return (
    <div
      style={{
        display: "flex",
        flexDirection: orientation === "v" ? "column" : "row",
        backgroundColor: "transparent",
        overflow: "hidden",
        alignItems: "center",
        height: "100%",
        width: "100%",
      }}
      ref={cont}
    >
      {state.imageEnabled && parameters.imageStyle && (
        <div style={state.imageStyle}>
          {
            <AnniversaryImage
              url={anniversary.image ? getPhotoUrl(anniversary.image, parameters, downloadsPath) : null}
              orientation={orientation}
              size={Number(imageSize) || 20}
              borderStyle={parameters.imageStyle}
            />
          }
        </div>
      )}
      {state.imageEnabled && parameters.separator && (
        <Separator order={state.imageStyle.order} {...separatorProps} />
      )}
      <div
        style={{
          ...state.textStyle,
          flexDirection: "column",
        }}
      >
        <FormattedText
          text={anniversary.name}
          format={parameters.nameFormat}
          maxChar={Number(parameters.nameMaxChar)}
          lineHeight={1.2}
        />
        {state.descriptionEnabled && (
          <FormattedText
            text={anniversary.position ?? ''}
            format={parameters.descriptionFormat}
            maxChar={Number(parameters.descriptionMaxChar)}
            lineHeight={1.2}
          />
        )}
        {state.optionalEnabled && (
          <FormattedText
            text={anniversary.optional ?? ''}
            format={parameters.optionalFormat}
            maxChar={Number(parameters.descriptionMaxChar)}
            lineHeight={1.2}
          />
        )
        }
      </div>
      {parameters.separator && (
        <Separator order={state.textStyle.order} {...separatorProps} />
      )}
      {state.dateEnabled && parameters.dateStyle && (
        <div style={state.dateStyle}>
          <AnniversaryDate
            style={parameters.dateStyle}
            day={anniversary.day}
            month={month}
            data={data}
          />
        </div>
      )}
      {state.dateEnabled && parameters.separator && (
        <Separator order={state.dateStyle.order} {...separatorProps} />
      )}
    </div>
  )
}
