import type {Meta} from "@storybook/react";
import ListRow, {ListRowProps} from "../components/UI/DuaList/ListRow";
import TextColumn from "../components/UI/DuaList/Columns/TextColumn";
import ListActions from "../components/UI/DuaList/Columns/ListActions";
import StatusColumn from "../components/UI/DuaList/Columns/StatusColumn";
import React from "react";
import DuaList from "../components/UI/DuaList/DuaList";
import ButtonColumn from "../components/UI/DuaList/Columns/ButtonColumn";
import NoteColumn from "../components/UI/DuaList/Columns/NoteColumn";
import PopupColumn from "../components/UI/DuaList/Columns/PopupColumn";


/***
 ** REFACTORS:
 ** default flex values on list columns types
 **
 **
 **/


const columnsMap = {
    'text': (args: any) =>
        <TextColumn
            size={args.font_size}
            label={'TEXT COLUMN'}
            title={'TEXT COLUMN'}
            flex={'1 0 140px'}
        >TEXT COLUMN</TextColumn>,

    'status': (args: any) =>
        <StatusColumn
            type={args.status}
            flex={'0 0 140px'}
            label={'STATUS'}
        >STATUS </StatusColumn>,

    'button': (args: any) =>
        <ButtonColumn
            action={() => console.log('j')}
            label={'CONFIRM'}
        >STATUS </ButtonColumn>,

    'note': (args: any) =>
        <NoteColumn
            flex={'0 0 50px'}
            title={`Σημείωση`}
            onSave={() => console.log('hellon')}
            note={'heres the note my friend'}
        >STATUS </NoteColumn>,

    'popup': (args: any) =>
        <PopupColumn
            flex={'0 0 50px'}
            label={'POPUP'}
        >
            <div>CC</div>
            <div>this is the popup</div>
        </PopupColumn>,


}


const meta: Meta = {

    title: 'Components/Lists/ListRow',
    component: ListRow,
    // @ts-ignore
    subcomponents: {TextColumn, ListActions, StatusColumn},
    argTypes: {
        status: {
            control: {
                type: "select",
            }
            ,
            // CONSTRUCT THE OPTIONS FROM THE KEYS OF componentsMap
            options: ['pending', 'warning', 'success', 'critical', 'error', 'completed', 'inactive', 'success_completed'],
        },
        text_column: {
            control: {
                type: 'text',
            }
        },
        font_size: {
            control: {
                type: 'text',
            }
        },
        number_of_rows: {
            control: {
                type: "number",
                min: 1,
                max: 20,
            }
        },
        _column_1: {
            control: 'select',
            options: [...Object.keys(columnsMap)]
        },
        _column_2: {
            control: 'select',
            options: ['',...Object.keys(columnsMap)],
            if: {arg: '_column_1', truthy: true},

        },
        _column_3: {
            control: 'select',
            options: ['',...Object.keys(columnsMap)],
            if: {arg: '_column_2', truthy: true},
        },
        _column_4: {
            control: 'select',
            options: ['',...Object.keys(columnsMap)],
            if: {arg: '_column_3', truthy: true},
        },
        _column_5: {
            control: 'select',
            options: ['',...Object.keys(columnsMap)],
            if: {arg: '_column_4', truthy: true},
        },
        _key: {
            control: false
        }
    },
    parameters: {
        controls: {

            exclude: ['_key'],
            sort: 'alpha'
        },
    },
    args: {
        _column_1: 'text'
    }
}
export default meta


export const ListRowEx = {
    args: {
        status: "warning"
    },
    render: (args: any) => {

        const columns = Object.keys(args).filter(key => key.startsWith('_column_'));

        return (
            <DuaList>
                {
                    [...Array(args.number_of_rows).keys()].map((_, index) =>
                        <ListRow {...args}>
                            {
                                [
                                    <ListActions>
                                        <ul>
                                            <li>ACTION 1</li>
                                            <li>ACTION 2</li>
                                        </ul>
                                    </ListActions>,

                                    ...columns.map(column => {
                                        // @ts-ignore
                                        return columnsMap[args[column]](args);
                                    })
                                ]
                            }

                        </ListRow>
                    )
                }
            </DuaList>
        )
    }
};