import type { FC } from 'react';
import React from 'react';
import { Section, SegmentedButton } from '@theorchard/suite-components';
import SectionTitle from '../sectionTitle';
import ProductLocalizations from './components/productLocalizations';
import TrackLocalizations from './components/trackLocalizations';
import type { MergedProduct } from 'src/product/product';

export const CLASS_NAME = 'LocalizationsBlock';

export interface Props {
    product: MergedProduct;
}

const LocalizationsBlock: FC<Props> = ({ product }) => {
    const defaultLanguage = Object.values(product.localizations).find(
        localization => localization.defaultLanguage
    );
    const localizations = Object.values(product.localizations).sort(
        (a, b) => a.languageId - b.languageId
    );
    const [displayLocalizationId, setDisplayLocalizationId] = React.useState(
        defaultLanguage?.languageId || -1
    );
    const displayLocalization =
        product.localizations[displayLocalizationId] || defaultLanguage;

    if (!defaultLanguage || localizations.length <= 1) return null;

    const onSelectLocalization = (languageId: number) => {
        setDisplayLocalizationId(languageId ?? defaultLanguage.languageId);
    };

    return (
        <div className={CLASS_NAME} data-testid={CLASS_NAME}>
            <SectionTitle
                title={$t(`contentReview.localizations.localizations`)}
                productId={product.basics.productId}
                section="Localizations"
                isRevision={false}
            />
            <Section>
                <SegmentedButton
                    className={`${CLASS_NAME}-localization-selector`}
                    testId="localization-selector"
                    variant="primary"
                    value={displayLocalizationId}
                    onChange={onSelectLocalization}
                >
                    {localizations.map(localization => {
                        return (
                            <SegmentedButton.Text
                                key={localization.languageId}
                                id={localization.languageId}
                            >
                                {localization.defaultLanguage
                                    ? $t(
                                          `contentReview.localizations.defaultLanguage`,
                                          {
                                              languageName:
                                                  localization.languageName,
                                          }
                                      )
                                    : localization.languageName}
                            </SegmentedButton.Text>
                        );
                    })}
                </SegmentedButton>
                <ProductLocalizations
                    product={product}
                    productLocalization={displayLocalization.product}
                />
                <TrackLocalizations
                    product={product}
                    trackLocalizations={displayLocalization.tracks}
                />
            </Section>
        </div>
    );
};

export default LocalizationsBlock;