import { DropDownListSelect } from 'tvu-react-pilot'

const Surface = ({ children }: any) => (
  <div style={{ background: 'var(--bg-layer1)', padding: 20, display: 'flex', gap: 20, flexWrap: 'wrap', alignItems: 'flex-start', borderRadius: 8 }}>
    {children}
  </div>
)

const channelItems = [
  { label: 'Studio A — Main', value: 'a', checked: true, active: false, disabled: false },
  { label: 'Studio B — Backup', value: 'b', checked: false, active: false, disabled: false },
  { label: 'Field Unit 3', value: 'c', checked: false, active: false, disabled: false },
  { label: 'Remote Guest', value: 'd', checked: false, active: false, disabled: true },
]

const multiItems = [
  { label: 'SRT', value: 'srt', checked: true, active: false, disabled: false },
  { label: 'RTMP', value: 'rtmp', checked: true, active: false, disabled: false },
  { label: 'HEVC', value: 'hevc', checked: false, active: false, disabled: false },
  { label: 'WebRTC', value: 'webrtc', checked: false, active: false, disabled: false },
]

const operationItems = [
  { label: 'Start stream', value: 'start', checked: false, active: false, disabled: false },
  { label: 'Take snapshot', value: 'snap', checked: false, active: false, disabled: false },
  { label: 'Delete source', value: 'delete', checked: false, active: false, disabled: false },
]

const sortItems = [
  { label: 'Bitrate (high to low)', value: 'bitrate', checked: false, active: true, disabled: false },
  { label: 'Viewers', value: 'viewers', checked: false, active: false, disabled: false },
  { label: 'Name (A–Z)', value: 'name', checked: false, active: false, disabled: false },
]

export const RadioType = () => (
  <Surface>
    <DropDownListSelect darkTheme="on" type="Radio" items={channelItems} />
  </Surface>
)

export const MultiType = () => (
  <Surface>
    <DropDownListSelect darkTheme="on" type="Multi" items={multiItems} />
  </Surface>
)

export const OperationListType = () => (
  <Surface>
    <DropDownListSelect darkTheme="on" type="Operation List" items={operationItems} />
  </Surface>
)

export const SortByType = () => (
  <Surface>
    <DropDownListSelect darkTheme="on" type="Sort By" items={sortItems} />
  </Surface>
)