import React from 'react';
import type { FC } from 'react';
import { Section } from '@theorchard/suite-components';
import { useTimedReleasesFF } from 'src/utils/features';
import { formatProductDate, formatProductTime } from 'src/utils/product';
import { CLASS_NAME_COLUMN, CLASS_NAME_ROW } from './schedulingAndPricing';
import TimedReleaseTable from './TimedReleaseTable';
import type { Product } from 'src/data/queries/product/types';

interface Props {
    product: Product;
}

const CLASS_NAME = 'DateInfo';
const TIMED_RELEASES = `TimedReleases`;
const INTL_PREFIX = 'contentReview.schedulingAndPricing';

const DateInfo: FC<Props> = ({ product }) => {
    const { releaseDate, saleStartDate, releaseSchedule } = product;
    const { saleDateTime } = releaseSchedule?.timed[0] ?? {};
    const isTimedReleasesEnabled = useTimedReleasesFF();

    return (
        <Section testId={`${CLASS_NAME}-section`}>
            <Section.Header className="fragment-heading">
                {$t(`${INTL_PREFIX}.dateInfo`)}
            </Section.Header>

            <div className={CLASS_NAME_ROW}>
                <div className={CLASS_NAME_COLUMN}>
                    <div className="fieldLabel">
                        {$t(`${INTL_PREFIX}.releaseDate`)}
                    </div>
                    <div className="value">
                        {formatProductDate(releaseDate)}
                    </div>
                </div>
                <div className={CLASS_NAME_COLUMN}>
                    <div className="fieldLabel">
                        {$t(`${INTL_PREFIX}.salesDate`)}
                    </div>
                    <div className="value">
                        {formatProductDate(saleStartDate)}
                    </div>
                </div>
                {isTimedReleasesEnabled && saleDateTime && (
                    <div className={CLASS_NAME_COLUMN}>
                        <div className="fieldLabel">
                            {$t(`${INTL_PREFIX}.saleDateTime`)}
                        </div>
                        <div className="value">
                            {formatProductTime(saleDateTime)}
                        </div>
                    </div>
                )}
            </div>

            {isTimedReleasesEnabled && saleDateTime && (
                <Section expandable>
                    <Section.Header className={`${TIMED_RELEASES}-header`}>
                        <span className={`${TIMED_RELEASES}-header-primary`}>
                            {$t(`${INTL_PREFIX}.timedReleaseGuide`)}
                        </span>
                        <span className={`${TIMED_RELEASES}-header-secondary`}>
                            {$t(`${INTL_PREFIX}.timedReleaseNote`)}
                        </span>
                    </Section.Header>

                    <Section.Body>
                        <TimedReleaseTable dateTime={saleDateTime} />
                    </Section.Body>
                </Section>
            )}
        </Section>
    );
};

export default DateInfo;