import { DatePicker, Flex } from "antd";
import React from "react";
import Label from "../Label/Label";
import styled from "styled-components";
import HelperText from "../HelperText/HelperText";
import Button from "../Button/Button";

const { RangePicker } = DatePicker;

// const styledDateRangePicker = styl
const StyledDiv = styled.div`
  width: 100%;
`;

const StyledDateRangePicker = styled(RangePicker)`
  width: 100%;
`;

const langMap = {
  en: {
    Show: "Show",
    Hide: "Hide",
    time: "Time",
  },
  ar: {
    Show: "عرض",
    Hide: "إخفاء",
    time: "الوقت",
  },
};

const DateRangePicker = (props) => {
  const {
    label,
    disabled,
    size,
    renderShowTime = true,
    showTime,
    status,
    error,
    helperText,
    inputRef,
    ...rest
  } = props;

  const [showTimePiece, setShowTimePiece] = React.useState(showTime || false);

  const langKey = localStorage.getItem("currentlanguage") || "en";
  const strings = Object.keys(langMap).includes(langKey) ? langMap[langKey] : langMap.en;

  return (
    <StyledDiv className="veris-range-picker-container">
      {label && <Label className="veris-range-picker-label" label={label} required={props.required} />}
      <StyledDateRangePicker
        size={size}
        {...rest}
        disabled={disabled}
        showTime={showTimePiece}
        needConfirm={false}
        renderExtraFooter={
          renderShowTime === true
            ? () => (
                <Flex justify="center" style={{ padding: 4, paddingRight: 0 }}>
                  <Button variant="text" size="small" onClick={() => setShowTimePiece((prevValue) => !prevValue)}>
                    {showTimePiece === true ? strings.Hide : strings.Show} {strings.time}
                  </Button>
                </Flex>
              )
            : undefined
        }
        status={status || (error ? "error" : "")}
        ref={inputRef}
        {...rest}
      />
      {helperText && <HelperText error={status === "error" || error}>{helperText}</HelperText>}
    </StyledDiv>
  );
};

export default DateRangePicker;