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

const StyledDivContainer = styled.div`
  width: 100%;
`;

const StyledDatePicker = styled(AntdDatePicker)`
  width: 100%;
`;

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

const DatePicker = (props) => {
  const { label, disabled, size, picker, showTime, renderShowTime, 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 (
    <StyledDivContainer className="veris-antd-date-picker-wrapper">
      {label && <Label className="veris-date-picker-label" label={label} required={props?.required} />}

      <StyledDatePicker
        size={size}
        picker={picker}
        disabled={disabled}
        showTime={showTimePiece}
        showNow={false}
        status={status || (error ? "error" : "")}
        ref={inputRef}
        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
        }
        {...rest}
      />
      {helperText && <HelperText error={status === "error" || error}>{helperText}</HelperText>}
    </StyledDivContainer>
  );
};

export default DatePicker;