// @flow

import React, { memo, useState, useEffect } from "react"
import SidebarBoxContainer from "../SidebarBoxContainer"
import { grey } from "@material-ui/core/colors"
import isEqual from "lodash/isEqual"
import "./styles.css"

import "antd/dist/antd.css";
import {Table, Typography} from "antd";
import { UnorderedListOutlined, WarningOutlined } from "@ant-design/icons";

export let fn_SetTableScroll = null;
export let fn_Select = null;
export let fn_SetImages = null;
let selectedRowIndex = -1;
let isRowSelected = false;

export const ImageSelectorSidebarBox = ({ images, onSelect, changeSelectedIndex, init_idx }) => {
  const [fileList, setFileList] = useState([]);

  fn_SetTableScroll = (idx) => {
    if(!isRowSelected){
      const tbl = document.getElementById("fileList");
      if(tbl){
        const tblBody = tbl.getElementsByClassName("ant-table-body");
    
        if(tblBody && tblBody.length > 0){
          tblBody[0].scrollTop = idx * 35;
        }
      }
    }
  }

  fn_SetImages = (p_images) => {
    let files = [];
    p_images.map((img) => {
      files.push(img);
		})

    setFileList(files);
  }
  
  useEffect(() => {
    selectedRowIndex = init_idx && init_idx > 0 ? init_idx : 0;
    let files = [];
    images.map((img) => {
      files.push(img);
		})

    setFileList(files);
  }, []);
  
  useEffect(() => {
    if(fileList && fileList.length > 0){
      const table = document.getElementById("fileList");
      const trs   = table.getElementsByTagName("tr");

      let idx = selectedRowIndex + 1; 
      for(let i = 0; i < trs.length; i++){
        if(idx === i){
          let cls = trs[i].getAttribute("class");
          if(cls.indexOf('bold') === -1){
            cls += " bold";
          }
          trs[i].setAttribute("class", cls);
        }else{
          let cls = trs[i].getAttribute("class").replace("bold", "");
          cls = cls.substring(0, cls.lastIndexOf(' '));
          trs[i].setAttribute("class", cls);
        }
      }
    }
  }, [fileList]);

  fn_Select = (img, rowIndex, _isRowSelected) => {
    isRowSelected = _isRowSelected;
    selectedRowIndex = rowIndex;
    changeSelectedIndex(rowIndex);
    onSelect(img);

    const table = document.getElementById("fileList");
    const trs   = table.getElementsByTagName("tr");

    let idx = rowIndex + 1; 
    for(let i = 0; i < trs.length; i++){
      if(idx === i){
        let cls = trs[i].getAttribute("class");
        if(cls.indexOf('bold') === -1){
          cls += " bold";
        }
        trs[i].setAttribute("class", cls);
      }else{
        let cls = trs[i].getAttribute("class").replace("bold", "");
        cls = cls.substring(0, cls.lastIndexOf(' '));
        trs[i].setAttribute("class", cls);
      }
    }
  }

  const columns = [
      {
        title: "",
        key: 'file_st_cd_nm',
        dataIndex: "file_st_cd_nm",
        align: 'left',
        width: '22%',
      },
      {
        title: "",
        key: 'inspt_rslt_cd',
        dataIndex: "inspt_rslt_cd",
        render : (text, record, num) =>{
          if(text === "R"){
            return <WarningOutlined style={{color:"red"}} />;
          }else{
            return "";
          }
        } ,
        align: 'center',
        width: '5%',
      },
      {
        title: () => <div style={{ textAlign: "left" }}>{'File List (' + fileList.length + ')'}</div>,
        key: 'name',
        dataIndex: "name",
        align: 'left',
        width: '72',
        render: (text, record) => {
          return text.length > 25 ? text.substring(0, 25) + '...' : text;
        }
      }
  ];

  return (
    <SidebarBoxContainer
      title="File List"
      subTitle={`(${images.length})`}
      icon={<UnorderedListOutlined style={{ color: grey[600], fontSize: 16 }} />}
      noScroll={true}
    >
      <Table
          id="fileList"
          size="small"
          columns={columns}
          dataSource={fileList}
          rowKey={record => record.name}
          pagination={false}
          showHeader={false}
          scroll={{y: 360}}
          onRow={(img, rowIndex) => ({onClick: () => {fn_Select(img, rowIndex, true)}})}
          // pagination={
          //     { pageSize : 10
          //     , showTotal : false
          //     }
          // }
      />
    </SidebarBoxContainer>
  )
}

const mapUsedImageProps = (a) => [a.name, (a.regions || []).length, a.src]

export default memo(ImageSelectorSidebarBox, (prevProps, nextProps) =>
  isEqual(
    prevProps.images.map(mapUsedImageProps),
    nextProps.images.map(mapUsedImageProps)
  )
)