import { createElement, FunctionComponent } from 'rax';
import View from "rax-view";
import Text from "rax-text";
import { getJustifyContent } from "./util";

const TableCell: FunctionComponent<any> = (props: any) => {
  const { column, dataSource, styles, rowIndex, bordered } = props;

  const onCell = (method: string, extraParam) => {
    if (typeof column.onCell === "function") {
      const eventMap = column.onCell(dataSource, rowIndex);
      if (eventMap && typeof eventMap[method] === "function") {
        return eventMap[method](extraParam);
      }
    }
    return null;
  }

  const onRenderCustomCell = () => {
    return column.render(dataSource[column.dataIndex], dataSource, rowIndex);
  }

  const onRenderCell = () => {
    const {
      sort: { width: sortWidth },
      cellPadding: { paddingLeft, paddingRight },
      headerDesc: { width: descWidth }
    } = styles;
    const titleStyle = { ...styles.cellTitle };
    if (column.align) {
      titleStyle.textAlign = column.align;
    }
    const titleCustomStyle = onCell("titleCustomStyle", titleStyle);

    let containerWidth = 0;
    if (column.width) {
      const padding = column.desc ? paddingLeft : paddingLeft + paddingRight;
      containerWidth = column.width - padding;
      if (column.sorter && column.align === "right") {
        containerWidth -= sortWidth;
      }
      if (column.desc && column.align === "right") {
        containerWidth -= descWidth;
      }
    }
    const titleContainerStyle = {
      justifyContent: getJustifyContent(column),
      width: containerWidth
    };
    return (
      <View style={titleContainerStyle}>
        <Text style={titleCustomStyle || titleStyle}>{dataSource[column.dataIndex]}</Text>
      </View>
    );
  }

  let widthStyle;
  if (column.width && column.width > 0) {
    widthStyle = { width: column.width };
  } else {
    widthStyle = { flex: column.flex || 1 };
  }
  let defaultStyle = {
    ...styles.cell,
    ...styles.cellPadding,
    ...widthStyle
  };
  if (column.hidden) {
    defaultStyle.opacity = 0;
  } else if (bordered) {
    defaultStyle = { ...defaultStyle, ...styles.columnBorder };
  }
  defaultStyle.paddingLeft = column.hidden ? 0 : 20;
  defaultStyle.paddingRight = column.hidden ? 0 : 20;

  const customStyle = onCell("customStyle", defaultStyle);
  return (
    <View
      style={customStyle || defaultStyle}
      onClick={(event) => { onCell("onClick", event); }}
      onLongPress={(event) => { onCell("onLongPress", event); }}
      onAppear={(event) => { onCell("onAppear", event); }}
      onDisappear={(event) => { onCell("onDisappear", event); }}
    >
      {typeof column.render === "function" ? onRenderCustomCell() : onRenderCell()}
    </View>
  );
}

export default TableCell;