import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { useEffect } from 'react';
import { setBodyPositions } from '../../../states/exam/bodyPositionListSlice';
import { RootState } from '../../../states/store';
import { Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import ImageViewer from './ImageViewer';
import { getViewIconUrl } from '../../../API/bodyPosition';

interface BodyPositionListProps {
  layout: 'horizontal' | 'vertical';
}

const BodyPositionList: React.FC<BodyPositionListProps> = ({ layout }) => {
  const dispatch = useDispatch();
  const bodyPositions = useSelector(
    (state: RootState) => state.bodyPositionList.bodyPositions
  );
  const works = useSelector((state: RootState) => state.examWorksCache.works);

  const addBodyPositionClick = () => {
    // dispatch(addBodyPosition({
    //   view_name: 'New View',
    //   view_description: 'Description of the new view',
    //   view_icon_name: 'icon-name'
    // }));
  };

  useEffect(() => {
    alert(
      `${works.length} works found == ${works[0].Views.length} views in the first work`
    );
    const bodyPositions = works
      .flatMap((work) => work.Views)
      .map((view) => ({
        internal_id: view.internal_id,
        view_id: view.view_id,
        view_name: view.view_name,
        view_name_local: view.view_name_local,
        view_other_name: view.view_other_name,
        view_description: view.view_description,
        view_position: view.view_position,
        application: view.application,
        anatomic_region: view.anatomic_region,
        patient_type: view.patient_type,
        body_part_id: view.body_part_id,
        view_icon_name: view.view_icon_name,
        view_big_icon_name: view.view_big_icon_name,
        view_coach_name: view.view_coach_name,
        modality: view.modality,
        work_station_id: view.work_station_id,
        apr_id: view.apr_id,
        img_proc_id: view.img_proc_id,
        sort: view.sort,
        is_enabled: view.is_enabled,
        product: view.product,
        is_pre_install: view.is_pre_install,
        procedure_id: view.procedure_id,
      }));
    dispatch(setBodyPositions(bodyPositions));
  }, [works, dispatch]);

  return (
    <div className={`body-position-list ${layout}`}>
      <div>{bodyPositions.length}</div>
      {bodyPositions.map((bodyPosition, index) => (
        // {/* @/src\pages\exam\components\BodyPositionList.tsx 向ImageViewer传递src属性值时，首先要使用@/src\API\bodyPosition.ts 提供的方法做一个拼接*/}
        <ImageViewer
          key={index}
          src={getViewIconUrl(bodyPosition.view_icon_name)}
          className="image-viewer-item"
        />
      ))}
      <Button
        icon={<PlusOutlined />}
        onClick={addBodyPositionClick}
        className="add-button"
      />
    </div>
  );
};

export default BodyPositionList;