// withHooks
import { applyStyle } from 'esoftplay';

import { LibList } from 'esoftplay/cache/lib/list/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketCountdown } from 'esoftplay/cache/market/countdown/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import esp from 'esoftplay/esp';
import moment from 'esoftplay/moment';
import useSafeState from 'esoftplay/state';

import React from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';


export interface MarketComplaint_seller_listArgs {

}
export interface MarketComplaint_seller_listProps {

}
export default function m(props: MarketComplaint_seller_listProps): any {
  const [status, setStatus] = useSafeState(1)

  const menu = [
    {
      title: esp.lang("market/complaint_seller_list", "not_done"),
      amount: 0,
      status: 1
    },
    {
      title: esp.lang("market/complaint_seller_list", "not_response"),
      amount: 0,
      status: 2
    },
    {
      title: esp.lang("market/complaint_seller_list", "done"),
      amount: 0,
      status: 3
    }
  ]
  return (
    <View style={applyStyle({ flex: 1 })} >
      <MarketHeader
        onlyBack
        title={esp.lang("market/complaint_seller_list", "header_title")} />
      <View style={applyStyle({ flexDirection: 'row' })} >
        <ScrollView horizontal style={applyStyle({ maxHeight: 50, paddingLeft: 15 })} showsHorizontalScrollIndicator={false} >
          {
            menu.map((item: any, i: number) => (
              <TouchableOpacity key={i} onPress={() => { setStatus(item.status) }} style={{ borderRadius: 20, borderWidth: 1, borderColor: status == item.status ? MarketStyle.colorPrimaryMarket : "#ddd", backgroundColor: status == item.status ? "#FFF7E1" : "white", paddingHorizontal: 17, paddingVertical: 10, flexDirection: "row", marginRight: 10, marginTop: 10, alignItems: "center" }} >
                <LibTextstyle textStyle="footnote" text={item.title + ' ' + '(' + item.amount + ')'} style={{ marginLeft: 5, color: "#909090" }} />
              </TouchableOpacity>
            ))
          }
          <View style={{ width: 15 }} />
        </ScrollView>
      </View>

      <LibList
        data={[1]}
        style={{ marginTop: 15 }}
        renderItem={(item: any, i: number) => (
          <TouchableOpacity activeOpacity={1} onPress={() => { }} key={i} style={[{ marginHorizontal: 15, backgroundColor: "white", padding: 15, marginTop: 2, marginBottom: 10, borderRadius: 5 }, LibStyle.elevation(2)]} >
            <View style={{ flexDirection: 'row', alignItems: 'center' }} >
              <View style={{ width: 24, height: 24, borderRadius: 12, backgroundColor: LibStyle.colorGrey, marginRight: 10 }} />
              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12 }} >{esp.lang("market/complaint_seller_list", "buyer")}</Text>
            </View>
            <View style={{ flexDirection: 'row', marginTop: 10, alignItems: 'center' }} >
              <View style={{ width: 40, height: 40, backgroundColor: LibStyle.colorGrey }} />
              <View style={{ flex: 1, marginLeft: 10 }} >
                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14 }} >{esp.lang("market/complaint_seller_list", "product_title")}</Text>
                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14 }} >{esp.lang("market/complaint_seller_list", "product_price")}</Text>
              </View>
              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14 }} >{LibUtils.money(60000)}</Text>
            </View>

            <View style={{ borderWidth: 1, borderRadius: 5, padding: 8, marginTop: 15, borderColor: MarketStyle.colorPrimaryMarket, backgroundColor: '#fff4f4' }} >
              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontStyle: "normal", lineHeight: 18, letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("market/complaint_seller_list", "buyer_complaint")}</Text>
            </View>

            <View style={{ marginTop: 10, marginLeft: 5 }} >
              <LibTextstyle textStyle='caption2' text={esp.lang("market/complaint_seller_list", "response_max")} />
              <MarketCountdown expired={moment('2021-01-10 14:05:11').localeFormat('YYYY-MM-DD HH:mm:ss')} style={{ fontWeight: 'bold' }} />
            </View>

            <View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }} >
              <TouchableOpacity style={{ flex: 1, alignItems: 'center', paddingVertical: 10, backgroundColor: MarketStyle.colorPrimaryMarket, borderRadius: 16, marginHorizontal: 5 }} >
                <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 12 }} >Tolak Komplain</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => { }} style={{ flex: 1, alignItems: 'center', paddingVertical: 10, backgroundColor: MarketStyle.colorPrimaryMarket, borderRadius: 16, marginHorizontal: 5 }} >
                <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 12 }} >Setujui Komplain</Text>
              </TouchableOpacity>
            </View>
          </TouchableOpacity>
        )}
      />

    </View>
  )
}