import type { FC } from 'react';
import React from 'react';
import { Section } from '@theorchard/suite-components';
import SectionTitle from '../sectionTitle';
import ProductArtworkPanel from './productArtworkPanel';
import ProductBasicsBlockField from './productBasicsBlockField';
import ProductBasicsBlockWrappedField from './productBasicsBlockWrappedField';
import type { MergedProduct } from 'src/product/product';

export const CLASS_NAME = 'ProductBasicsBlock';
const INTL_PREFIX = 'contentReview.productBasicsBlock';

export interface Props {
    product: MergedProduct;
}

const ProductBasicsBlock: FC<Props> = ({ product }) => {
    return (
        <div className={CLASS_NAME} data-testid={CLASS_NAME}>
            <SectionTitle
                title={$t(`${INTL_PREFIX}.basics`)}
                testId={`${CLASS_NAME}-title`}
                productId={product.basics.productId}
                section="Product Basics"
                isRevision={product.isRevision}
            />
            <div
                className={`${CLASS_NAME}-body`}
                data-testid={`${CLASS_NAME}-body`}
            >
                <div className="row w-100">
                    <div className="d-flex col-3">
                        <ProductArtworkPanel
                            field={product.basics.imageLocation}
                            product={product}
                        />
                    </div>

                    <Section
                        testId={`${CLASS_NAME}-infoSection`}
                        className="d-flex col-6 px-4 pb-2"
                    >
                        <Section.Header className="section-title font-size-18px pt-4 pb-4">
                            {$t(`${INTL_PREFIX}.productInfo`)}
                        </Section.Header>

                        <div
                            className={`${CLASS_NAME}-grid`}
                            data-testid={`${CLASS_NAME}-productInfoFields`}
                        >
                            <ProductBasicsBlockWrappedField
                                fieldName="release_name"
                                field={product.basics.productName}
                            />
                            <ProductBasicsBlockWrappedField
                                fieldName="delivered_version"
                                field={product.basics.productVersion}
                            />
                            <ProductBasicsBlockWrappedField
                                fieldName="upc"
                                field={product.basics.upc}
                            />
                            <ProductBasicsBlockWrappedField
                                fieldName="format"
                                field={product.basics.format}
                            />
                            <ProductBasicsBlockWrappedField
                                fieldName="account_name"
                                field={product.label.label}
                            />
                            <ProductBasicsBlockWrappedField
                                fieldName="meta_language"
                                field={product.basics.metadataLanguage}
                            />
                            <ProductBasicsBlockWrappedField
                                fieldName="subaccount_name"
                                field={product.label.subaccount}
                            />
                            <ProductBasicsBlockWrappedField
                                fieldName="c_line"
                                field={product.basics.cLine}
                            />
                            <ProductBasicsBlockWrappedField
                                fieldName="label"
                                field={product.basics.imprint}
                            />
                            <ProductBasicsBlockWrappedField
                                fieldName="genre_id"
                                field={product.basics.genre}
                            />
                            <ProductBasicsBlockWrappedField
                                fieldName="product_code"
                                field={product.basics.productCode}
                            />
                            <ProductBasicsBlockWrappedField
                                fieldName="release_subgenre"
                                field={product.basics.subgenre}
                            />
                        </div>
                    </Section>
                    <div className="d-flex col-3 pr-0">
                        <Section
                            className="px-2"
                            testId={`${CLASS_NAME}-notes-section`}
                        >
                            <div className="col-12">
                                <Section.Header className="font-size-18px pt-4 pb-4">
                                    {$t(`${INTL_PREFIX}.notes`)}
                                </Section.Header>

                                <div className="row">
                                    <div className="col">
                                        <ProductBasicsBlockField
                                            fieldName="not_for_distribution"
                                            field={
                                                product.basics
                                                    .notForDistribution
                                            }
                                        />
                                        <ProductBasicsBlockField
                                            fieldName="version"
                                            field={
                                                product.basics
                                                    .productVersionNotes
                                            }
                                        />
                                        <ProductBasicsBlockField
                                            fieldName="special_instructions"
                                            field={
                                                product.basics
                                                    .specialInstructions
                                            }
                                        />
                                    </div>
                                </div>
                            </div>
                        </Section>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ProductBasicsBlock;