import React from 'react';
import type { FC } from 'react';
import { SegmentedButton } from '@theorchard/suite-components';

const CLASS_NAME = 'ActiveTracksSwitch';

export enum ActiveTracksSwitchValues {
    ActiveTracks = 'activeTracks',
    InactiveTracks = 'inactiveTracks',
}
export interface Props {
    defaultValue?: ActiveTracksSwitchValues;
    onChange?: (selected: ActiveTracksSwitchValues) => void;
}

const ActiveTracksSwitch: FC<Props> = ({
    defaultValue = ActiveTracksSwitchValues.ActiveTracks,
    onChange,
}) => {
    return (
        <div className={`${CLASS_NAME}-buttons`}>
            <SegmentedButton
                onChange={onChange}
                variant="primary"
                testId="active-tracks-seg-button"
                defaultValue={defaultValue}
            >
                <SegmentedButton.Text id="activeTracks">
                    {$t(
                        `orchardSoundRecordings.activeTracksSwitch.activeTracksButton`
                    )}
                </SegmentedButton.Text>
                <SegmentedButton.Text id="inactiveTracks">
                    {$t(
                        `orchardSoundRecordings.activeTracksSwitch.inactiveTracksButton`
                    )}
                </SegmentedButton.Text>
            </SegmentedButton>
        </div>
    );
};

export default ActiveTracksSwitch;