import React from 'react';
import { Card, Table } from '@theorchard/suite-components';
import { useAppConfig } from '@theorchard/suite-config';
import { useIdentity } from '@theorchard/suite-identity';
import { useFeaturesQuery } from '../../../queries/features';
import { BooleanValue } from './booleanValue';

export const AccountFeatures = () => {
    const user = useIdentity();
    const config = useAppConfig();

    const { data: allFeatures = {} } = useFeaturesQuery({
        featureFlagFilter: config.featureFlagFilter,
    });

    const features = Object.entries(user.features).sort(([f1], [f2]) => f1.localeCompare(f2));

    const enabledFeatures = features.filter(([, enabled]) => enabled);
    const disabledFeatures = features.filter(([, enabled]) => !enabled);

    return (
        <Card className="AccountFeatures">
            <Card.Header>Features</Card.Header>
            <Card.Body>
                <Table bordered={false} size="sm">
                    <thead>
                        <tr>
                            <th>Feature</th>
                            <th>Status</th>
                            <th>Default</th>
                        </tr>
                    </thead>
                    <tbody>
                        {enabledFeatures.map(([feature]) => (
                            <tr key={feature}>
                                <td>{feature}</td>
                                <td>
                                    <BooleanValue value />
                                </td>
                                <td>
                                    <BooleanValue value={allFeatures[feature]} />
                                </td>
                            </tr>
                        ))}
                        {disabledFeatures.map(([feature]) => (
                            <tr key={feature}>
                                <td>{feature}</td>
                                <td>
                                    <BooleanValue value={false} />
                                </td>
                                <td>
                                    <BooleanValue value={allFeatures[feature]} />
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </Table>
            </Card.Body>
        </Card>
    );
};