import { Avatar } from "@progress/kendo-react-layout";

import {
  ListView,
  ListViewFooter,
  ListViewHeader,
} from "@progress/kendo-react-listview";

import { ComprehensiveProps } from "../../DomainProps";

export interface ListViewItemProps {
  dataItem: any;
  index?: number;
}

export interface ListViewProps extends ComprehensiveProps {
  data?: any[];
  headerClassName?: string | undefined;
  headerTitle?: string;
  footerClassName?: string | undefined;
  footerTitle?: string;
  item?: React.ComponentType<ListViewItemProps>;
  itemRenderComponent?: JSX.Element;
  width?: any;
}

const listHeader = (
  listHeaderClassName: string | undefined,
  listHeaderTitle: string | undefined
) => {
  return listHeaderTitle ? (
    <ListViewHeader className={listHeaderClassName}>
      {listHeaderTitle}
    </ListViewHeader>
  ) : null;
};

const listFooter = (
  listFooterClassName: string | undefined,
  listFooterTitle: string | undefined
) => {
  return listFooterTitle ? (
    <ListViewFooter className={listFooterClassName}>
      {listFooterTitle}
    </ListViewFooter>
  ) : null;
};

const ItemRender = (
  props: ListViewItemProps,
  listItemRenderComponent: JSX.Element
) => {
  let item = props.dataItem;
  return (
    <div className="row p-2 border-bottom align-middle" style={{ margin: 0 }}>
      <div className="col-2">
        <Avatar type="image">
          <img
            src={`https://gist.github.com/simonssspirit/0db46d4292ea8e335eb18544718e2624/raw/2a595679acdb061105c80bd5eeeef58bb90aa5af/${item.image}-round-40x40.png`}
            alt={"test alt"}
          />
        </Avatar>
      </div>
      <div className="col-6">
        <h2
          style={{ fontSize: 14, color: "#454545", marginBottom: 0 }}
          className="text-uppercase"
        >
          {item.name}
        </h2>
        <div style={{ fontSize: 12, color: "#a0a0a0" }}>{item.email}</div>
      </div>
      <div className="col-4">
        <div className="k-chip k-chip-md k-rounded-md k-chip-solid k-chip-solid-base">
          <div className="k-chip-content">{item.messages} new messages</div>
        </div>
      </div>
    </div>
  );
};

function ListViewWidget({
  data,
  widgetStyle,
  id,
  width,
  item,
  footerClassName,
  footerTitle,
  headerClassName,
  headerTitle,
  itemRenderComponent,
}: ListViewProps) {
  return (
    <div id={widgetStyle?.id} className={widgetStyle?.className || ""}>
      <ListView
        data={data}
        item={(
          props: ListViewItemProps,
          listItemRenderComponent: JSX.Element
        ) => ItemRender(props, listItemRenderComponent)}
        style={{ width: width }}
        header={() => listHeader(headerClassName, headerTitle)}
        footer={() => listFooter(footerClassName, footerTitle)}
      />
    </div>
  );
}

export default ListViewWidget;
