import React, { Component } from 'react';
import { View, Image } from 'react-native';

import { TextLabel } from 'src/components/Texts/TextVariant';

import IHabitStep from 'src/entities/Habits/types/IHabitStep';

import TStepStatuses from 'src/entities/Habits/types/TStepStatuses';
import { format } from 'src/utils/datefns';
import { createStyles } from 'src/utils/helpers'
import Theme from 'src/Theme';

interface Props {
  data : IHabitStep;
  shortText?: boolean;
  hidePhoto?: boolean;
}

interface Status {
  status : TStepStatuses;
  icon : string;
  style : any;
}

export default class Note extends Component<Props> {

  renderStatus : Status[] = [
    {
      status : 'Done',
      icon : Theme.Icons.doneBold,
      style : styles.statusDone
    },
    {
      status : 'Skip',
      icon : Theme.Icons.closeAlternativeBold,
      style : styles.statusNotDone
    }
  ]

  render() {
    const { data, shortText = false, hidePhoto = false } = this.props;
    const { comment, status, updatedUtc } = data;

    let text = comment;
    if (shortText && !!text) {
      text = text.substr(0, 56);
    }

    return (
      <View>
        <View style={styles.head}>
          <TextLabel color={Theme.Colors.barChartGreen}>{format(new Date(updatedUtc), 'MM MMM')}</TextLabel>
          {/* TODO: smile */}
          {this.renderStatus.map(e => e.status === status && <Image key={status} source={{uri : e.icon}} style={e.style}/>)}
        </View>
        {comment && (
          <TextLabel
            style={styles.text}
            color={Theme.Colors.calendarMonthDay}
            family={Theme.Fonts.alternative}
            weight={'600'}
            numberOfLines={!!shortText ? 2 : undefined}
          >
            {text}
          </TextLabel>
        )}
        {hidePhoto || null /* TODO: photo */}
      </View>
    );
  }
}

const styles = createStyles({
  head: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  text: {
    marginTop: 14,
  },
  statusDone: {
    width: 14,
    height: 11,
  },
  statusNotDone: {
    width: 14.52,
    height: 14.52,
  },
});