import React from 'react';
import { SegmentedInput } from '@theorchard/suite-components';
import { formatMessage } from '@theorchard/suite-frontend';
import { GlyphIcon } from '@theorchard/suite-icons';
import BrandSelector from 'src/components/brandSelector';
import { CLASSNAME } from './songWriters';
import type { BrandOption } from 'src/components/brandSelector';
import type { CompanyBrandName } from 'src/data/schemaTypes';

interface Props {
    searchValue?: string | null;
    onSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    isEmployeeWithFullAccess: boolean;
    initialBrandValue?: CompanyBrandName;
    onBrandChange: (value?: BrandOption) => void;
}

const PageControls: React.FC<Props> = ({
    searchValue,
    onSearchChange,
    isEmployeeWithFullAccess,
    initialBrandValue,
    onBrandChange,
}) => (
    <div className="PageControls mb-3">
        <div className="row">
            <div className="col-xs-12 col-md-6 col-lg-4">
                <SegmentedInput>
                    <SegmentedInput.Static>
                        <GlyphIcon name="search" size={16} />
                    </SegmentedInput.Static>
                    <input
                        type="text"
                        className="form-control"
                        placeholder={formatMessage(
                            `${CLASSNAME}.searchPlaceholder`
                        )}
                        value={searchValue || ''}
                        onChange={onSearchChange}
                    />
                </SegmentedInput>
            </div>
            {isEmployeeWithFullAccess && (
                <div className="col-xs-6 col-md-7 col-lg-2">
                    <BrandSelector
                        initialValue={initialBrandValue}
                        onChange={onBrandChange}
                    />
                </div>
            )}
        </div>
    </div>
);

export default PageControls;