import { ReactNode, useMemo } from 'react';
import chunk from 'lodash/chunk';

import { Grid, GridColumnsCount, LayoutProps, Text } from '@servicetitan/design-system';

import { SettingsSection } from '../settings-section';
import { CompanyTradeCheckbox } from '../company-trade-checkbox';

export interface Trade<TradeType extends string | number> {
    qaKey?: string;
    name: string;
    value: TradeType;
    active: boolean;
    asset: {
        main: string;
        x2: string;
        x3: string;
        alt?: string;
    };
}

export interface CompanyTradesPickerProps<TradeType extends string | number = string> {
    trades: Trade<TradeType>[];
    layout?: LayoutProps['type'];
    className?: string;
    title?: ReactNode;
    text?: ReactNode | string;
    columns?: number;
    onTradeChange(t?: TradeType): void;
}

export function CompanyTradesPicker<T extends string | number = string>({
    trades,
    onTradeChange,
    layout,
    className,
    columns = 4,
    title = 'Select Your Trades',
    text = 'Choose which trades describe your business so we can give you relevant content and merge tags.',
}: CompanyTradesPickerProps<T>) {
    const rows = useMemo(
        () => chunk(trades, columns).map((row, idx) => ({ row, key: `row=${idx}` })),
        [trades, columns],
    );

    return (
        <SettingsSection
            className={className}
            layout={layout}
            title={title}
            qaPrefix="qa-settings-select-your-trades"
            text={text}
        >
            <Grid columns={columns as GridColumnsCount}>
                {rows.map(({ row, key }) => {
                    return (
                        <Grid.Row key={key} stretched className="p-0">
                            {row.map(trade => {
                                return (
                                    <Grid.Column key={trade.name}>
                                        <CompanyTradeCheckbox<T>
                                            className={`qa-settings-select-your-trades-${
                                                trade.qaKey ?? trade.value
                                            }`}
                                            active={trade.active}
                                            onClick={onTradeChange}
                                            value={trade.value}
                                            label={
                                                <div className="ta-center">
                                                    <img
                                                        src={trade.asset.main}
                                                        srcSet={`${trade.asset.x3} 3x, ${trade.asset.x2} 2x`}
                                                        alt={trade.asset.alt ?? ''}
                                                    />
                                                    <Text bold className="m-t-2" size={2}>
                                                        {trade.name}
                                                    </Text>
                                                </div>
                                            }
                                        />
                                    </Grid.Column>
                                );
                            })}
                        </Grid.Row>
                    );
                })}
            </Grid>
        </SettingsSection>
    );
}