import { inject } from 'mobx-react';
import { useState } from 'react';
import { Row, Col, StepTitle, DatePickerDepricated as DatePicker } from '@nova-hf/ui';
import { useTranslation } from 'utils/i18n';

interface IRelocationDateProps {
  fiber?: any;
  color?: string;
  onNext(): void;
}

const RelocationDate = ({ fiber, color, onNext }: IRelocationDateProps) => {
  const [relocationDate, setRelocationDate] = useState(
    (fiber && fiber.relocationDate) || new Date(),
  );
  const { t } = useTranslation('flutningur');

  const onChangeDate = (date: Date) => {
    setRelocationDate(date);
    fiber.relocationDate = date;

    onNext();
  };

  const { line, zip, city } = fiber?.confirmedAvailability;
  const { title } = fiber?.property;

  return (
    <div>
      <StepTitle
        title={t('relocationDate.title')}
        subtitle={t('relocationDate.subtitle', { property: `${line} (${title}), ${zip} ${city}` })}
        color={color}
      />
      <Row>
        <Col col={6} colWide={4}>
          <DatePicker
            onChange={onChangeDate}
            selected={relocationDate}
            minDate={new Date()}
            color={color}
          />
        </Col>
      </Row>
    </div>
  );
};

export default inject('fiber')(RelocationDate);