import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../../../tools/namingTools';
import Button from '../../../../atoms/button/Button';
import { getFullDate } from '../../../../tools/dateHelpers';
import './styles/ProductQuestionItem.scss';

const n = createNamespace('ProductQuestionItem');

export const N_COLS_LIST = 1;
export const N_COLS_GRID = 4;

const ProductQuestionItem = ({
    data: {
        title,
        comment,
        author,
        lastModified,
        answers,
        i18n: {
            showAnswer,
            hideAnswer
        }
    },
    i18n
}) => {
    const [isCollapsed, setCollapsed] = useState(true);
    const renderAnswer = answer => (
        <div key={answer.id} {...n('answerItem').withE2EId().props}>
            <p {...n('description').withE2EId().props}>
                <strong>{`${i18n.answer}: `}</strong>
                {answer.comment}
            </p>
            <div {...n('author').props}>
                <span {...n('authorName').withE2EId().props}>{answer.author.name}</span>
                <span {...n('authorDate').withE2EId().props}>{getFullDate(answer.lastModified)}</span>
            </div>
        </div>
    );

    const answersBlock = answers && answers.length ? (
        <div {...n('answer').withE2EId().props}>
            {isCollapsed ? renderAnswer(answers[0]) : answers.map(renderAnswer)}
            {answers.length > 1 ? (
                <div {...n('btnAnswer').props}>
                    <Button buttonType="link" type="primary" onClick={() => setCollapsed(!isCollapsed)}>
                        {isCollapsed ? showAnswer : hideAnswer}
                    </Button>
                </div>
            ) : ''}
        </div>
    ) : '';

    return (
        <div {...n('container').props}>
            <h2 {...n('title').withE2EId().props}>{`${i18n.question}: ${title}`}</h2>
            <p {...n('description').withE2EId().props}>{comment}</p>
            <div {...n('author').props}>
                <span {...n('authorName').withE2EId().props}>{author.name}</span>
                <span {...n('authorDate').withE2EId().props}>{getFullDate(lastModified)}</span>
            </div>
            {answersBlock}
        </div>
    );
};

export const questionShape = {
    id: PropTypes.number,
    title: PropTypes.string,
    comment: PropTypes.string,
    author: PropTypes.shape({
        uuid: PropTypes.string,
        name: PropTypes.string,
        profilePicUrl: PropTypes.string
    }),
    lastModified: PropTypes.number,
    isCurrentUserQuestion: PropTypes.bool,
    answers: PropTypes.arrayOf(
        PropTypes.shape({
            id: PropTypes.number,
            comment: PropTypes.string,
            author: PropTypes.shape({
                uuid: PropTypes.string,
                name: PropTypes.string,
                profilePicUrl: PropTypes.string
            }),
            lastModified: PropTypes.number,
            official: PropTypes.bool,
            isCurrentUserAnswer: PropTypes.bool,
            actionEndpoint: PropTypes.string,
            i18n: PropTypes.shape({
                byDate: PropTypes.string
            })
        })
    ),
    actionEndpoints: PropTypes.shape({
        entry: PropTypes.string,
        comments: PropTypes.string
    }),
    i18n: PropTypes.shape({
        showAnswer: PropTypes.string,
        hideAnswer: PropTypes.string
    })
};

ProductQuestionItem.propTypes = {
    data: PropTypes.shape(questionShape),
    i18n: PropTypes.shape({
        question: PropTypes.string,
        answer: PropTypes.string
    })
};

ProductQuestionItem.defaultProps = {
    data: {
    },
    i18n: {
        question: 'Q',
        answer: 'A'
    }
};

export default ProductQuestionItem;
