<UserControl x:Class="SmartAquaViewer.View.CCTVView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:SmartAquaViewer.View"
             xmlns:classes="clr-namespace:SmartAquaViewer.Classes"
             xmlns:controls="clr-namespace:SmartAquaViewer.Controls"
             xmlns:helper="clr-namespace:SmartAquaViewer.Helper"
             xmlns:model="clr-namespace:SmartAquaViewer.Model"
             xmlns:md="http://materialdesigninxaml.net/winfx/xaml/themes"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Border >
        <md:DrawerHost RightDrawerBackground="Transparent" IsRightDrawerOpen="{Binding IsOpenMode}" OpenMode="Standard">
            <Grid Background="Transparent">
                <ItemsControl ItemsSource="{Binding PlayerVMs}" Margin="0 0 30 0">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <UniformGrid x:Name="ugrdFFPlayer" Rows="{Binding RowCount}" Columns="{Binding ColumnCount}" />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <controls:FFPlayerControl/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>

                <Border BorderThickness="0 0 1 0" BorderBrush="#2d374c">
                    <Border.Style>
                        <Style TargetType="Border">
                            <Setter Property="Visibility" Value="Collapsed"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding IsOpenMode}" Value="False">
                                    <Setter Property="Visibility" Value="Visible"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Border.Style>
                </Border>
                <Grid HorizontalAlignment="Right">
                    <Button Tag="left" Margin="0"
                            Style="{StaticResource ImageButtonStyle}" Width="25" Command="{Binding ChangeDrawerStatusCommand}"
                            VerticalAlignment="Center" HorizontalAlignment="Right" Visibility="{Binding BtnVisibilityLeft}"
                            helper:ImageButtonHelper.ImageSource="/Resources/Images/arrow_left.png"/>

                    <Button Tag="right" Margin="0"
                            Style="{StaticResource ImageButtonStyle}" Width="25" Command="{Binding ChangeDrawerStatusCommand}"
                            VerticalAlignment="Center" HorizontalAlignment="Right" Visibility="{Binding BtnVisibilityRight}"
                            helper:ImageButtonHelper.ImageSource="/Resources/Images/arrow_right.png"/>
                </Grid>
            </Grid>
            <md:DrawerHost.RightDrawerContent>
                <Border Width="300"
                        BorderBrush="#2d374c" BorderThickness="1">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="100"/>
                            <RowDefinition/>
                            <RowDefinition Height="40"/>
                        </Grid.RowDefinitions>
                        <Grid>
                            <Border VerticalAlignment="Center" Margin="40 0">
                                <md:PackIcon Kind="Cctv" Foreground="#ffd663" Width="30" Height="30"/>
                            </Border>
                            <TextBlock Text="CCTV 목록" FontFamily="{StaticResource SCDream5}"
                                       FontSize="20" FontWeight="Bold" Foreground="White"
                                       VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </Grid>

                        <ListView Grid.Row="1" Margin="10 0"
                                  ItemsSource="{Binding CCTVInfoList}"
                                  ScrollViewer.VerticalScrollBarVisibility="Hidden"
                                  BorderThickness="0" Background="Transparent">
                            <ListView.View>
                                <GridView ColumnHeaderContainerStyle="{StaticResource GridViewColumnHeaderStyle}">
                                    <GridViewColumn Header="상태" Width="50">
                                        <GridViewColumn.CellTemplate>
                                            <DataTemplate>
                                                <Grid>
                                                    <Ellipse Width="15" Height="15" VerticalAlignment="Center" HorizontalAlignment="Center">
                                                        <Ellipse.Style>
                                                            <Style TargetType="Ellipse">
                                                                <Setter Property="Fill" Value="Red"/>
                                                                <Style.Triggers>
                                                                    <DataTrigger Binding="{Binding Status}" Value="{x:Static model:CCTVStatus.Connected}">
                                                                        <Setter Property="Fill" Value="LimeGreen"/>
                                                                    </DataTrigger>
                                                                </Style.Triggers>
                                                            </Style>
                                                        </Ellipse.Style>
                                                    </Ellipse>
                                                </Grid>
                                            </DataTemplate>
                                        </GridViewColumn.CellTemplate>
                                    </GridViewColumn>
                                    <GridViewColumn Header="ID" Width="80">
                                        <GridViewColumn.CellTemplate>
                                            <DataTemplate>
                                                <Grid>
                                                    <TextBlock Text="{Binding DeviceId}" Style="{StaticResource GridViewTextBlockStyle}"/>
                                                </Grid>
                                            </DataTemplate>
                                        </GridViewColumn.CellTemplate>
                                    </GridViewColumn>
                                    <GridViewColumn Header="CCTV" Width="150">
                                        <GridViewColumn.CellTemplate>
                                            <DataTemplate>
                                                <Grid>
                                                    <TextBlock 
                                                        Text="{Binding DeviceName}" 
                                                        Style="{StaticResource GridViewTextBlockStyle}"/>
                                                </Grid>
                                            </DataTemplate>
                                        </GridViewColumn.CellTemplate>
                                    </GridViewColumn>
                                </GridView>
                            </ListView.View>
                        </ListView>
                        
                        <!--하단 버튼-->
                        <Grid Grid.Row="2">
                            <Button Padding="0" Margin="5" Content="재생" Visibility="{Binding BtnVisibilityPlay}"
                                    HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                                    Style="{StaticResource MaterialDesignFlatMidBgButton}"
                                    Command="{Binding PlayAllCCTVCommand}">
                                <Button.ToolTip>
                                    <ToolTip Content="CCTV 재생"/>
                                </Button.ToolTip>
                            </Button>
                            <Button Padding="0" Margin="5" Content="중지" Visibility="{Binding BtnVisibilityStop}"
                                    HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                                    Style="{StaticResource MaterialDesignFlatMidBgButton}"
                                    Command="{Binding StopAllCCTVCommand}">
                                <Button.ToolTip>
                                    <ToolTip Content="CCTV 재생"/>
                                </Button.ToolTip>
                            </Button>
                        </Grid>
                    </Grid>
                </Border>
            </md:DrawerHost.RightDrawerContent>
        </md:DrawerHost>
    </Border>
</UserControl>
