/** @format */

/**
 * @class MessagesList
 * @extends Component
 * @description A component that renders a list of message items.
 * Manages the display of MessageItem components and handles message selection.
 */
class MessagesList extends Component {
    /**
     * @constructor
     * @param {Object} props - Component properties
     * @param {Array<Object>} [props.messages=[]] - Array of message objects to display
     * @param {Function} [props.onMessageClick] - Callback function when a message is clicked
     */
    constructor(props) {
        super(props);
        this.state = {
            filteredMessages: props.messages || [],
            searchTerm: ''
        };
    }

    /**
     * Update filtered messages when props change
     * @param {Object} nextProps - Next props
     */
    componentWillReceiveProps(nextProps) {
        if (nextProps.messages !== this.props.messages) {
            // Re-apply current search filter to new messages
            this.handleSearch(this.state.searchTerm);
        }
    }

    /**
     * Filter messages based on search term
     * @param {string} searchTerm - The search term to filter messages
     * @private
     */
    handleSearch(searchTerm) {
        const { messages = [] } = this.props;
        const searchTermLower = searchTerm.toLowerCase();

        const filtered = messages.filter(message =>
            message.contactName.toLowerCase().includes(searchTermLower)
        );

        this.setState({
            filteredMessages: filtered,
            searchTerm
        });
    }

    /**
     * Creates MessageItem components from the filtered messages array
     * @private
     * @returns {Array<MessageItem>} Array of MessageItem components
     */
    renderMessageItems() {
        const { onMessageClick } = this.props;
        const { filteredMessages } = this.state;

        return filteredMessages.map(
            (message) =>
                new MessageItem({
                    message,
                    onClick: onMessageClick,
                    key: message.id,
                })
        );
    }

    /**
     * Render the messages list with search bar
     * @returns {HTMLElement} The rendered messages list element
     */
    render() {
        const { searchTerm } = this.state;

        return this.createElement(
            'div',
            {
                className: 'messages-container',
                style: {
                    display: 'flex',
                    flexDirection: 'column',
                    height: '100%'
                }
            },
            new SearchBar({
                placeholder: 'Search by contact name...',
                onSearch: this.handleSearch.bind(this),
                value: searchTerm
            }),
            this.createElement(
                'div',
                {
                    className: 'messages-list',
                    role: 'list',
                    'aria-label': 'Messages list',
                    style: {
                        flex: 1,
                        overflowY: 'auto',
                        padding: '10px'
                    }
                },
                ...this.renderMessageItems()
            )
        );
    }
}