import React, { memo, useEffect, useState } from 'react'

import { ExposerEvent } from '@aptpod/data-viz-visual-parts-sdk'

import {
  INIT_VIEW_GRID,
  INIT_DATA_SPECS,
  INIT_VALUES,
  INIT_FONT_FAMILIES,
} from './constant'
import { HorizontalBars } from './component'
import { useSelectProps } from './selector'

type Props = {
  comm: ExposerEvent
}

/**
 * data-viz-visual-parts-sdk から取得したデータを HorizontalBars Component に必要なPropsに連携します。
 */
export const HorizontalBarsContainer: React.FC<Props> = memo((props) => {
  // HorizontalBars を表示するためのStateを定義します。
  const [fontFamilies, setFontFamiles] = useState(INIT_FONT_FAMILIES)
  const [viewGrid, setViewGrid] = useState(INIT_VIEW_GRID)
  const [dataSpecs, setDataSpecs] = useState(INIT_DATA_SPECS)
  const [values, setValues] = useState(INIT_VALUES)

  // ExposerEventのイベントハンドラを定義します。
  // イベント初期設定完了後、loadedイベントを Data Visualizerに通知します。
  useEffect(() => {
    // フォントファミリーを Data Visualizer から取得します。
    props.comm.fontFamilies.on(setFontFamiles)
    // Data Visualizer のパネルが使用しているマス数を取得します。
    props.comm.viewGrid.on(setViewGrid)
    // Data Visualizer でパネルにバインドされているデータの定義を全てを取得します。
    props.comm.dataSpecifications.on(setDataSpecs)
    // Data Visualizer でパネルにバインドされている計測データ全てを取得します。
    props.comm.values.on(setValues)
    // Data Visualizer に、ビジュアルパーツのイベント取得初期設定が完了したことを通知します。
    props.comm.loaded.emit()
  }, [props.comm])

  // Stateの情報からHorizontalBarsのPropsを取得します。
  const selectedProps = useSelectProps({
    fontFamilies,
    viewGrid,
    dataSpecifications: dataSpecs,
    values,
  })

  return <HorizontalBars {...selectedProps} />
})