const Summary = () => {
  const [timeSpan, setTimeSpan] = useState('Day');
  const [derivedData, setDerivedData] = useState({
    chartTimeSpan: 'Day',
    sales: [],
    totalSales: 0,
    orders: 0,
    logins: 0,
  });

  const _fetchSummary = async (timeSpan) => {
    console.log(`_fetchSummary HIT : ${timeSpan}`);
    try {
      const res = await axios.get(`/summary/${timeSpan.toLowerCase()}`);
      const { loginCount, orderQty, sales, totalSales } = res.data;
      await setDerivedData({
        chartTimeSpan: timeSpan,
        sales,
        totalSales,
        orders: orderQty,
        logins: loginCount,
      });
      await setTimeSpan(timeSpan);
      console.log(timeSpan, loginCount, orderQty, sales, totalSales);
    } catch (err) {
      console.log(err);
    }
  };

  const _switchTimeSpan = (newTimeSpan) => {
    console.log(`TimeSpan : ${timeSpan}`);
    console.log(`NewTimeSpan : ${newTimeSpan}`);
    if (timeSpan !== newTimeSpan) {
      _fetchSummary(newTimeSpan);
    }
  };

  const { chartTimeSpan, sales, totalSales, orders, logins } = derivedData;
  console.log(derivedData);
  return (
    <>
  <TouchableOpacity onPress={() => _switchTimeSpan('Day')}>
    <Text style={dropDownItemStyle}>Day</Text>
  </TouchableOpacity>
  <TouchableOpacity onPress={() => _switchTimeSpan('Week')}>
    <Text style={dropDownItemStyle}>Week</Text>
  </TouchableOpacity>
  <TouchableOpacity onPress={() => _switchTimeSpan('Month')}>
    <Text style={dropDownItemStyle}>Month</Text>
  </TouchableOpacity>
  <TouchableOpacity onPress={() => _switchTimeSpan('Year')}>
    <Text style={dropDownItemStyle}>Year</Text>
  </TouchableOpacity>
    </>
  );
};