import React                                     from 'react';
import { Button, Description, Divider, Icon, Switch, Title, Tooltip } from 'libs/ui/src';
import { Wrapper }                               from '../../wrapper/wrapper.component';

const featuresArray = [
    {
        title:      'Cloud-Based Drag & Drop Builder',
        hobbyists:  true,
        premium:    true,
        teams:      true,
        enterprise: true
    },
    {
        title:      'World Tracking',
        hobbyists:  true,
        premium:    true,
        teams:      true,
        enterprise: true
    },
    {
        title:      'Marker Tracking',
        hobbyists:  true,
        premium:    true,
        teams:      true,
        enterprise: true
    },
    {
        title:      'Body Tracking *',
        hobbyists:  true,
        premium:    true,
        teams:      true,
        enterprise: true
    },
    {
        title:      'Face Tracking *',
        hobbyists:  true,
        premium:    true,
        teams:      true,
        enterprise: true
    },
    {
        title:      'True-to-Size Product Viewer',
        hobbyists:  true,
        premium:    true,
        teams:      true,
        enterprise: true
    },
    {
        title:      'Sections Library',
        hobbyists:  true,
        premium:    true,
        teams:      true,
        enterprise: true
    },
    {
        title:      'Code Inject',
        hobbyists:  true,
        premium:    true,
        teams:      true,
        enterprise: true
    },
    {
        title:      'SDK',
        hobbyists:  true,
        premium:    true,
        teams:      true,
        enterprise: true
    },
    {
        title:      'Views / month',
        hobbyists:  null,
        premium:    null,
        teams:      null,
        enterprise: null
    },
    {
        title:      'Seats',
        hobbyists:  null,
        premium:    null,
        teams:      null,
        enterprise: null
    },
    {
        title:      'No Watermark',
        hobbyists:  false,
        premium:    true,
        teams:      true,
        enterprise: true
    },
    {
        title:      'Loader Customization *',
        hobbyists:  false,
        premium:    false,
        teams:      true,
        enterprise: true
    },
    {
        title:      'Team Library',
        hobbyists:  false,
        premium:    false,
        teams:      true,
        enterprise: true
    },
    {
        title:      'Commerical License',
        hobbyists:  false,
        premium:    false,
        teams:      true,
        enterprise: true
    },
    {
        title:      'Simple NFT Minting',
        hobbyists:  false,
        premium:    true,
        teams:      true,
        enterprise: true
    },
    {
        title:      'Agency Program Inclusion',
        hobbyists:  false,
        premium:    false,
        teams:      true,
        enterprise: true
    },
    {
        title:      'Analytics',
        hobbyists:  false,
        premium:    false,
        teams:      true,
        enterprise: true
    },
    {
        title:      'Programmatic NFT Minting',
        hobbyists:  false,
        premium:    false,
        teams:      false,
        enterprise: true
    },
    {
        title:      'Custom URL Domain Mapping *',
        hobbyists:  false,
        premium:    false,
        teams:      false,
        enterprise: true
    },
    {
        title:      'Dedicated Account Manager',
        hobbyists:  false,
        premium:    false,
        teams:      false,
        enterprise: true
    },
    {
        title:      'Custom Design & Development',
        hobbyists:  false,
        premium:    false,
        teams:      false,
        enterprise: true
    }
];

const getDivider = () => ({
    features:   <Divider />,
    hobbyists:  <Divider />,
    premium:    <Divider />,
    teams:      <Divider />,
    enterprise: <Divider />
});

const getTableCellsBody = (cells: Array<object>) => {
    featuresArray.forEach((feature, index) => {
        if (feature.title === 'Views / month') {
            cells.push({
                features: <Wrapper row valign='center' style={ { height: '24px ' } }>
                    <Wrapper margin='xs' maxWidth='fit-content'><Description>Views / month</Description></Wrapper>
                    <Tooltip menuWidth='120px' position='top-left' title='Hello' message='Hello World'>
                        <Icon size={ 14 } name='info' />
                    </Tooltip>
                </Wrapper>,
                hobbyists:  <Wrapper align='center' valign='center' style={ { height: '24px ' } }><Description>500 views</Description></Wrapper>,
                premium:    <Wrapper align='center' valign='center' style={ { height: '24px ' } }><Description>1K views</Description></Wrapper>,
                teams:      <Wrapper align='center' valign='center' style={ { height: '24px ' } }><Description>10K views</Description></Wrapper>,
                enterprise: <Wrapper align='center' valign='center' style={ { height: '24px ' } }><Description>TBD</Description></Wrapper>
            });
        } else if (feature.title === 'Seats') {
            cells.push({
                features: <Wrapper row valign='center' style={ { height: '24px ' } }>
                    <Wrapper margin='xs' maxWidth='fit-content'><Description>Seats</Description></Wrapper>
                    <Tooltip menuWidth='120px' position='top-left' title='Hello' message='Hello World'>
                        <Icon size={ 14 } name='info' />
                    </Tooltip>
                </Wrapper>,
                hobbyists:  <Wrapper align='center' valign='center' style={ { height: '24px ' } }><Description>1</Description></Wrapper>,
                premium:    <Wrapper align='center' valign='center' style={ { height: '24px ' } }><Description>1</Description></Wrapper>,
                teams:      <Wrapper align='center' valign='center' style={ { height: '24px ' } }><Description>5</Description></Wrapper>,
                enterprise: <Wrapper align='center' valign='center' style={ { height: '24px ' } }><Description>TBD</Description></Wrapper>
            });
        } else {
            cells.push({
                features: <Wrapper row valign='center' style={ { height: '24px ' } }>
                    <Wrapper margin='xs' maxWidth='fit-content'><Description>{ feature.title }</Description></Wrapper>
                    <Tooltip menuWidth='120px' position='top-left' title='Hello' message='Hello World'>
                        <Icon size={ 14 } name='info' />
                    </Tooltip>
                </Wrapper>,
                hobbyists: feature.hobbyists ? <Wrapper align='center'><Icon size={ 24 } name='checkSmall' /></Wrapper>
                    : <Wrapper align='center'>–</Wrapper>,
                premium: feature.premium ? <Wrapper align='center'><Icon size={ 24 } name='checkSmall' /></Wrapper>
                    : <Wrapper align='center'>–</Wrapper>,
                teams: feature.teams ? <Wrapper align='center'><Icon size={ 24 } name='checkSmall' /></Wrapper>
                    : <Wrapper align='center'>–</Wrapper>,
                enterprise: feature.enterprise ? <Wrapper align='center'><Icon size={ 24 } name='checkSmall' /></Wrapper>
                    : <Wrapper align='center'>–</Wrapper>
            });
        }
        cells.push(getDivider());
    });

    return cells;
};

export const getTableHeader = (index: number) => {
    const tableCellsHeader = [
        <Wrapper key={ 0 } padding='xxs' fullWidth>
            <Description margin='xs' size='xxl'>Save 10–15%</Description>
            <Wrapper row margin='xl' valign='center'>
                <Description>Monthly</Description>
                { ' ' }
                <Switch size='lg' />
                { ' ' }
                <Description>Yearly</Description>
            </Wrapper>
            <Wrapper align='left' valign='bottom' maxWidth='160px'>
                <Description color='grey-6'>Roll over the features list to see the details</Description>
            </Wrapper>
        </Wrapper>,

        <Wrapper key={ 1 } padding='xxs' align='center'>
            <Description margin='xs' size='xxl'>HOBBYISTS</Description>
            <Description margin='md'>Non-Commercial Use</Description>
            <Description color='grey-6'>Try out our products for free with or without code, fast & easily</Description>
        </Wrapper>,

        <Wrapper key={ 2 } padding='xxs' align='center'>
            <Description margin='xs' size='xxl'>PREMIUM</Description>
            <Description margin='md'>Non-Commercial Use</Description>
            <Description color='grey-6'>Enhance the brand, engage the audience & sell through your work</Description>
        </Wrapper>,

        <Wrapper key={ 3 } padding='xxs' align='center'>
            <Description margin='xs' size='xxl'>TEAMS</Description>
            <Description margin='md'>Commercial Use</Description>
            <Description color='grey-6'>Empower teams of designers, engineers, marketers to create & manage projects</Description>
        </Wrapper>,

        <Wrapper key={ 4 } padding='xxs' align='center'>
            <Description margin='xs' size='xxl'>ENTERPRISE</Description>
            <Description margin='md'>Commercial Use</Description>
            <Description color='grey-6'>Use our fully loaded, NFT-enabled, customized services to create & manage your projects</Description>
        </Wrapper>
    ];

    return tableCellsHeader[ index ];
};

export const getTableFooter = (index: number) => {
    const tableCellsHeader = [
        <Wrapper key={ 0 } padding='sm' align='center'>
            <Description margin='sm'>Free</Description>
            <Button margin='md' size='xl' fullWidth>Upgrade</Button>
        </Wrapper>,

        <Wrapper key={ 1 } padding='sm' align='center'>
            <Description margin='sm'>$99 / month</Description>
            <Button margin='md' size='xl' fullWidth>Upgrade</Button>
        </Wrapper>,

        <Wrapper key={ 2 } padding='sm' align='center'>
            <Description margin='sm'>$3K / month</Description>
            <Button margin='md' size='xl' fullWidth>Upgrade</Button>
        </Wrapper>,

        <Wrapper key={ 3 } padding='sm' align='center'>
            <Description margin='sm'>Loaded + Customized</Description>
            <Button margin='md' size='xl' fullWidth>Contact us</Button>
        </Wrapper>
    ];

    return tableCellsHeader[ index ];
};

export const getTableCells = () => {
    const tableCells: Array<object> = [];
    const tableCellsWithBody = getTableCellsBody(tableCells);
    return tableCellsWithBody;
};