import React, { memo } from "react";
import { DatePicker, Radio, Input, InputNumber, Select } from "antd";
import moment from "moment";
import Login from "@/pages/user/Login";
const { RangePicker } = DatePicker;
const { Option } = Select;
const RenderItemType = memo(
  (props) => {
    const { value, onChange, type, min, max, radioarr, disabled, selectarr } =
      props;
    if (type == "dateRange") {
      return (
        <RangePicker
          {...props}
          value={value ? moment(value) : undefined}
          onChange={(val) => {
            onChange(val ? moment(val).format("YYYY-MM-DD") : "");
          }}
          format="YYYY-MM-DD"
          style={{ width: "100%" }}
        />
      );
    } else if (type == "month") {
      return (
        <DatePicker
          {...props}
          value={value ? moment(value) : undefined}
          onChange={(val) => {
            onChange(val ? moment(val).format("YYYY-MM") : "");
          }}
          picker="month"
          format="YYYY-MM"
          style={{ width: "100%" }}
        />
      );
    } else if (type == "year") {
      return (
        <DatePicker
          {...props}
          value={value ? moment(value) : undefined}
          onChange={(val) => {
            onChange(val ? moment(val).format("YYYY") : "");
          }}
          picker="year"
          format="YYYY"
          style={{ width: "100%" }}
        />
      );
    } else if (type == "dateHour") {
      return (
        <DatePicker
          {...props}
          value={value ? moment(value) : undefined}
          onChange={(val) => {
            onChange(val ? moment(val).format("YYYY-MM-DD HH") : "");
          }}
          format="YYYY-MM-DD HH"
          showTime={{ format: "HH" }}
          style={{ width: "100%" }}
        />
      );
    } else if (type == "radio") {
      return (
        <Radio.Group
          {...props}
          onChange={(e) => {
            onChange(e.target.value);
          }}
          value={value}
          style={{ width: "100%" }}
        >
          {radioarr.map((el) => {
            return (
              <Radio key={el.value} value={el.value}>
                {el.label}
              </Radio>
            );
          })}
        </Radio.Group>
      );
    } else if (type == "select") {
      return (
        <Select
          {...props}
          onChange={(value) => {
            onChange(value);
          }}
          value={value}
          style={{ width: "100%" }}
          allowClear={true}
        >
          {selectarr.map((el) => {
            return (
              <Option key={el.value} value={el.value}>
                {el.label}
              </Option>
            );
          })}
        </Select>
      );
    } else if (type == "input") {
      return (
        <Input
          {...props}
          value={value}
          onChange={(e) => {
            onChange(e.target.value);
          }}
          style={{ width: "100%" }}
          allowClear={true}
        />
      );
    } else if (type == "inputnumber") {
      return (
        <InputNumber
          {...props}
          value={value}
          onChange={(val) => {
            onChange(val);
          }}
          style={{ width: "100%" }}
          allowClear={true}
          min={min || null}
          max={max || null}
        />
      );
    }
  },
  (prev, next) => {
    if (prev.rowKey && next.rowKey) {
      if (prev.rowKey == next.rowKey) {
        return true;
      } else {
        return false;
      }
    } else {
      if (prev.id == next.id) {
        return true;
      } else {
        return false;
      }
    }
  }
);
export default RenderItemType;