import { IGenericDatePicker } from '../../../generic/types';
import { ISlackDatePicker, ISlackInput, ISlackTextObject } from '../../types';
import { transformTextObject } from './text';
import { transformConfirm } from './confirm';
import { getElementWithSectionWrapper } from '../helpers/section-wrapper';

export const transformDatePicker = ({
  props
}: IGenericDatePicker): ISlackDatePicker|ISlackInput => {
  const element: ISlackDatePicker = {
    type: 'datepicker',
    action_id: props.slack?.action_id || props.variableName || props.web?.variableName
  };

  if (props.placeholder) {
    element.placeholder = transformTextObject({
      value: props.placeholder,
      slack: {
        type: props.slack?.placeholder_type,
        emoji: props.slack?.placeholder_emoji,
        verbatim: props.slack?.placeholder_verbatim
      }
    });
  }

  function getSlackFormattedDate (date) {
    if (!Date.parse(date)) {
      return;
    }

    // console.log('date -> ', date);

    date = new Date(date);

    const year = date.getFullYear();
    const month = (1 + date.getMonth()).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');

    return year + '-' + month + '-' + day;
  }

  if (props.value) {
    element.initial_date = getSlackFormattedDate(props.value);
  }

  const confirm = props.slack?.confirm;

  if (confirm) {
    element.confirm = transformConfirm(confirm);
  }

  
  if (props.label) {
    const label: ISlackTextObject = transformTextObject({
      value: props.label,
      type: 'plain'
    });

    const dispatch_action = props.web?.interactive;

    return getElementWithSectionWrapper(element, label, dispatch_action);
  }

  return element;
};