import React, {Component} from 'react';
import Row from './Row.jsx';
import RowsActions from './actions/RowsActions';
import PanelActions from './actions/PanelActions';
import { connect } from "react-redux";
import { CouponsPlus, __ } from './globals.ts';
import PresetsPanel from './PresetsPanel.jsx';

export const getMainRows = rows => rows.filter(
    // !type is for backwards compatibility, if no type then this is a main row!
    ({type}) => (type ===window.CouponsPlus.components.rows.types.main) || !type
)

class Rows extends Component
{
    static structure = {
        'rows': []
    };

    static mapStateToProps(state){
        return {
            rows: state.rows || [],
        }
    };

    render() 
    {
        //<button onClick={() => this.props.addRow()}></button>
        return (
            <div className="flex flex-col items-center space-y-1">
                {
                    /**
                     * This has been removed as of 3.0 in favor of WelcomeActions.js
                     */
                    true && this.noRows()
                }
                {getMainRows(this.props.rows).map((rowData, index) => (
                    <div key={rowData.temporaryID} className="flex flex-col w-full">
                        <Row data={rowData} rowLetter={String.fromCharCode(97 + index)}/>
                        <div className="w-full text-gray-400 flex flex-row justify-between items-center">

                        <div className="w-full h-px border-t-2 border-dashed border-gray-400"></div> 
                        <span className="flex text-gray-150 leading-5 px-2 rounded-3 bg-gray-400">{__('OR',window.CouponsPlus.textDomain)}</span> 
                        <div className="w-full h-px border-t-2 border-dashed border-gray-400"></div>
                    </div>
                        <button className={(
                            'space-x-1 items-center justify-center mt-2 flex flex-row py-1 text-gray-400'
                        )} onClick={() => this.props.newRow(
                            rowData.temporaryID,
                           window.CouponsPlus.components.rows.types.main
                        )}>
                            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clipRule="evenodd" />
                            </svg>
                            <span>{CouponsPlus.text.add.rows}</span>
                        </button>    
                    </div>
                ))}
            </div>
        );
    }

    noRows() 
    {
        return (
            <>
                {!getMainRows(this.props.rows).length? (
                    <div className="flex flex-col justify-center items-center min-h-80 text-gray-600">
                        <img src={CouponsPlus.urls.icons.noRows} className="w-70 border-none" alt={__('No Rows!',window.CouponsPlus.textDomain)}/>
                        <h1 className="text-4x text-current mt-10">{__('Nothing here, yet!',window.CouponsPlus.textDomain)}</h1>
                        <div className="flex flex-col items-center mt-4 text-gray-500">
                            <p className="text-base max-w-90 text-center">{__('Coupons+ is made of:',window.CouponsPlus.textDomain)}</p>  
                            <p className="flex flex-row space-x-1 text-base text-center mt-1">
                                <span>
                                    {__('Rows',window.CouponsPlus.textDomain)}
                                </span>
                                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clipRule="evenodd" />
                                </svg>
                                <span>
                                    {__('Columns',window.CouponsPlus.textDomain)}
                                </span>
                                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clipRule="evenodd" />
                                </svg>
                                <span>
                                    {__('Conditions/Filters',window.CouponsPlus.textDomain)}
                                </span>
                                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clipRule="evenodd" />
                                </svg>
                                <span>
                                    {__('Offers',window.CouponsPlus.textDomain)}
                                </span>
                            </p>  
                            <p className="text-base max-w-90 text-center mt-9">{__('Add a new row or select a preset to get started.',window.CouponsPlus.textDomain)}</p>  
                            <div className="flex flex-row items-center space-x-2 mt-3">
                                <button className={"flex flex-row space-x-1 items-center justify-center bg-blue-normal text-gray-100 px-12 h-8 rounded-1"} onClick={() => this.props.newRow(undefined,window.CouponsPlus.components.rows.types.main)}>
                                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clipRule="evenodd" />
                                    </svg>
                                    <span className="flex h-4">{CouponsPlus.text.add.rows}</span>
                                </button>
                                <button class="space-x-1 items-center justify-center inline-flex bg-gray-300 text-gray-550 px-8 h-8 rounded-1" onClick={() => this.props.setActivePanel(PresetsPanel.label)}>
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 3.75H6.912a2.25 2.25 0 00-2.15 1.588L2.35 13.177a2.25 2.25 0 00-.1.661V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 00-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.013 1.244h3.218a2.25 2.25 0 002.013-1.244l.256-.512a2.25 2.25 0 012.013-1.244h3.859M12 3v8.25m0 0l-3-3m3 3l3-3" />
                                    </svg>

                                    <span>{__('Use a preset',window.CouponsPlus.textDomain)}</span>
                                </button>
                            </div>
                        </div>
                    </div>
                ): ''}
            </>
        );
    }
}
export default connect(Rows.mapStateToProps, {...RowsActions, ...PanelActions})(Rows);