/* eslint-disable @typescript-eslint/no-explicit-any */
import { CellContext } from "@tanstack/table-core"
import { FC, SyntheticEvent } from "react"
import {
  ColumnItemShape,
  TableCellAlign,
  TableCellButtonGroupItemProps,
  TableCellIconGroupItemProps,
  tagColorSchemeOptions,
} from "@/widgetLibrary/TableWidget/interface"
import {
  applyAlignmentStyle,
  applyFlexAlignmentStyle,
  applyIconContainerStyle,
  applyIconStyle,
  // applyIconContainerStyle,
  applyTableButtonGroupStyle,
  applyTableCellBackgroundStyle,
  overFlowStyle,
} from "@/widgetLibrary/TableWidget/style"
import {
  getConfigFromColumnShapeData,
  getMappedValue,
} from "@/widgetLibrary/TableWidget/utils"
import { convertPathToString } from "@/utils/converter"
import { getSpecialThemeColor } from "@/utils/color-palette"
import { Button, ButtonGroup, IconButton } from "@mui/material"
import { ButtonIcon } from "../IconWidget/utils"

export const RenderTableStringCell: FC<{
  value?: string
  alignment?: TableCellAlign
  bgColor?: string
}> = (props) => {
  const { value, alignment, bgColor } = props
  return (
    <span
      css={[
        applyAlignmentStyle(alignment),
        applyTableCellBackgroundStyle(bgColor),
      ]}
    >
      {value ? value : "-"}
    </span>
  )
}

export const RenderTableLink: FC<{
  cell: CellContext<any, any>
  value?: string
  alignment?: TableCellAlign
}> = (props) => {
  const { cell, value, alignment } = props
  const cellValue = value ?? cell.getValue()

  return (
    <div css={applyAlignmentStyle(alignment)}>
      {cellValue ? (
        <a href={cellValue} target="_blank">{`${cellValue}`}</a>
      ) : (
        "-"
      )}
    </div>
  )
}

export const RenderTableImage: FC<{
  cell: CellContext<any, any>
  value?: string
  data: ColumnItemShape
}> = (props) => {
  const { cell, value, data } = props
  const { fromCurrentRow } = data
  const objectFit = getConfigFromColumnShapeData(
    "objectFit",
    data,
    cell.row.index,
    fromCurrentRow,
  )
  return (
    <img src={value} style={{objectFit:objectFit}}/>)
}

 // <Image
    //   w="100%"
    //   width="100%"
    //   height="42px"
    //   src={value}
    //   objectFit={objectFit}
    //   draggable={false}
    // />

const getTagColor = (color: string, rowIndex: number, index: number) => {
  const tagDefaultColor = [
    "techPink",
    "purple",
    "red",
    "green",
    "orange",
    "cyan",
  ]

  return color === "auto"
    ? tagDefaultColor[(rowIndex + index) % tagDefaultColor.length]
    : tagColorSchemeOptions.includes(color)
      ? color
      : getSpecialThemeColor(color)
}

export const RenderTableTag: FC<{
  cell: CellContext<any, any>
  value?: Array<unknown>
  color: string | "auto"
  alignment?: TableCellAlign
}> = (props) => {
  const { cell, value, color, alignment } = props
  const rowIndex = cell.row.index

  return (
    <div css={applyFlexAlignmentStyle(alignment)}>
      {value?.length ? (
        value?.map((itemValue,) => {
          // const colorScheme = getTagColor(color, rowIndex, index)
          return (
          <div>
              {`${itemValue}`}
           </div>
          )
        })
      ) : (
        <div style ={{color:getTagColor(color, rowIndex, 0)}}>{"-"}</div>
      )}
    </div>
  )
} // </Tag>
  // <Tag key={index} colorScheme={colorScheme}>
export const RenderTableButton: FC<{
  cell: CellContext<any, any>
  value?: string
  data: ColumnItemShape
  eventPath: string
  handleOnClickMenuItem?: (path: string, row: any) => void
}> = (props) => {
  const { value, data, cell, eventPath, handleOnClickMenuItem } = props
  const rowIndex = cell.row.index
  const paths = [eventPath, `${cell.row.index}`]
  const { fromCurrentRow, variant, colorScheme } = data
  const disabled = getConfigFromColumnShapeData(
    "disabled",
    data,
    rowIndex,
    fromCurrentRow,
  )
  const clickEvent = (e: SyntheticEvent) => {
    cell.row.getIsSelected() && e.stopPropagation()
    handleOnClickMenuItem?.(convertPathToString(paths), cell.row)
  }

  return (
    <Button
      css={overFlowStyle}
      fullWidth
      variant={"contained"}
      disabled={disabled}
      sx={{color:colorScheme}}
      // colorScheme={colorScheme}
      onClick={clickEvent}
    >
      {`${value ?? "Click"}`}
    </Button>
  )
}

export const RenderTableButtonGroup: FC<{
  cell: CellContext<any, any>
  value?: TableCellButtonGroupItemProps[]
  alignment?: TableCellAlign
  eventPath: string
  handleOnClick?: (path: string, index?: number) => void
}> = (props) => {
  const { cell, value, alignment, eventPath, handleOnClick } = props
  const rowIndex = cell.row.index

  const handleOnClickButtonItem = (e: SyntheticEvent, index: number) => {
    cell.row.getIsSelected() && e.stopPropagation()
    const paths = [`${eventPath}`, "buttonGroupContent", `${index}`, "events"]
    handleOnClick?.(convertPathToString(paths), rowIndex)
  }

  return value ? (
    <ButtonGroup css={applyTableButtonGroupStyle(alignment)} >
      {value.map((item, index) => {
        const { cellValue, colorScheme, disabled, variant, fromCurrentRow } =
          item
        const _disabled = getMappedValue(
          rowIndex,
          disabled,
          fromCurrentRow,
          "disabled",
          false,
        )

        return (
          <Button
            key={index}
            sx={{color:colorScheme}}
            // colorScheme={colorScheme}
            disabled={_disabled}
            variant={variant}
            onClick={(e) => handleOnClickButtonItem(e, index)}
          >
            {cellValue ? cellValue : "-"}
          </Button>
        )
      })}
    </ButtonGroup>
  ) : (
    <span>{"-"}</span>
  )
}

export const RenderTableIconGroup: FC<{
  cell: CellContext<any, any>
  value?: TableCellIconGroupItemProps[]
  alignment?: TableCellAlign
  eventPath: string
  handleOnClick?: (path: string, index?: number) => void
  handleUpdateMulti: (value: Record<string, any>) => void
}> = (props) => {
  const { cell, value, alignment, eventPath, handleOnClick, handleUpdateMulti } = props
  const rowIndex = cell.row.index
  const handleOnClickIconItem = (e: SyntheticEvent, index: number) => {
    cell.row.getIsSelected() && e.stopPropagation()
    const paths = [`${eventPath}`, "iconGroupContent", `${index}`, "events"]
    handleUpdateMulti({"targetRow": cell.row.original})
    handleOnClick?.(convertPathToString(paths), rowIndex)
  }
  
  return (
    <div css={applyAlignmentStyle(alignment)}>
      {value ? (
        value.map((item, i) => {  
          
    const myIconComponent = ButtonIcon(item.cellValue, {iconStyle:{}}, {});/*-------------------------*/ 
          return item ? (
            /*-------------------------*/
            <IconButton
      size="small"
      css={applyIconStyle(item.colorScheme, false)}
      onClick={(e)=>handleOnClickIconItem(e,i)}
    >
      {myIconComponent}
    </IconButton>
    /*-------------------------*/
          ) : (
            <span>{"-"}</span>
          )
        })
      ) : (
        <span>{"-"}</span>
      )}
    </div>
  )
}
export const RenderTableRating: FC<{
  value?: unknown
  alignment?: TableCellAlign
}> = (props) => {
  const { value, alignment } = props
  const maxCount = 5

  return (
    <div css={applyAlignmentStyle(alignment)}>
      <div>
        {`${value}-${maxCount}`}
      </div>
      {/* <Rate count={maxCount} readonly value={Number(value) || 0} /> */}
    </div>
  )
}
